28241 sujets

CSS et mise en forme, CSS3

[Résolu] Fondu enchaîné et CSS3 : Mon expérience

Je vous propose du code pour créer un fondu enchaîné entre plusieurs images en pur CSS3. A noter que je me suis fortement inspiré du travail de Rich Bradshaw (css3.bradshawenterprises.com/cfimg/).

Le code CSS :
@-webkit-keyframes Fondu3imgInOut
{
  0%, 27%, 100%
  {
    opacity:1;
  }
  33%, 93%
  {
    opacity:0;
  }
}

@-moz-keyframes Fondu3imgInOut
{
  0%, 27%, 100%
  {
    opacity:1;
  }
  33%, 93%
  {
    opacity:0;
  }
}

@-o-keyframes Fondu3imgInOut
{
  0%, 27%, 100%
  {
    opacity:1;
  }
  33%, 93%
  {
    opacity:0;
  }
}

@keyframes Fondu3imgInOut
{
  0%, 27%, 100%
  {
    opacity:1;
  }
  33%, 93%
  {
    opacity:0;
  }
}

#Fondu3img
{
  position:relative;
  height:188px;
  width:250px;
  margin:0 auto;
}
#Fondu3img img
{
  position:absolute;
  left:0;
}

#Fondu3img img
{
  -webkit-animation-name: Fondu3imgInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 15s;

  -moz-animation-name: Fondu3imgInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 15s;

  -o-animation-name: Fondu3imgInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 15s;

  animation-name: Fondu3imgInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 15s;
}
#Fondu3img img:nth-of-type(1)
{
  -webkit-animation-delay: 10s;
  -moz-animation-delay: 10s;
  -o-animation-delay: 10s;
  animation-delay: 10s;
}
#Fondu3img img:nth-of-type(2)
{
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  -o-animation-delay: 5s;
  animation-delay: 5s;
}
#Fondu3img img:nth-of-type(3)
{
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}


Le code HTML :
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1" />
  <meta name="description" content="Test image transform" />
  <link rel="stylesheet" href="../_local/styles/local.css" type="text/css">
  <link rel="stylesheet" href="styles/fading.css" type="text/css">
  <link rel="stylesheet" href="styles/transform.css" type="text/css">
</head>
<body>
  <br>
  <br>
  <div id="Fondu3img" class="shadow">
    <img src="images/imagea.jpg" title="Image a">
    <img src="images/imageb.jpg" title="Image b">
    <img src="images/imagec.jpg" title="Image c">
  </div>
</body>
</html>


Toute la mécanique est basée sur le fonctionnement des keyframes en jouant avec l'opacité des images et les delays (décalage d'affichage de chaque image). Dans mon exemple, il y a 3 images. Je veux une durée d'affichage de 5 secondes dont 1 de fondu.

Un peu de mathématiques : La durée totale est de 15s (3 x 5), les keyframes s'étendent donc sur 15s. Le but est de faire apparaître une image pendant 4s, suivi d'un fondu avec la deuxième pendant 1s, celle-ci apparaissant entièrement à 5s, elle reste 4s, se fond avec la 3ème pendant 1s pour apparaître complètement à 10s et ainsi de suite. Pour les keyframes, on applique les règles du site de Bradshaw :
- à 0 % : opacité = 1
- à 4/15*100 = 27% : opacité = 1
- à (4+1)/15*100 = 33% : opacité = 0
- à (15-1)/15*100 = 93% : opacité = 0
- à 100% : opacité = 1

Un exemple en test sur mon site : www.lespetitscailloux.eu/_test_/test2.html où je combine, sur le même principe, le fondu avec une transformation de hauteur pour l'image texte.

Toute suggestion est bien sûr la bienvenue.
Sur quel type de machine as-tu testé ce code ? (laptop ?)

Parce que j'ai voulu utiliser des animations pour des images en background de mon site, sur un MacBookPro 15" i7 très récent (pas les derniers mais ceux de l'année dernière, le modèle haut de gamme) et bien les ventilos avaient tendance à s'énerver assez vite.

Du coup, pas d'animation, pas question de faire subir ce genre de désagrément aux visiteurs.

J'aimerais bien ton retour sur cette question.
Modifié par MagicCarpet (12 Feb 2015 - 16:27)
Testé sous Windows avec IE 10, Firefox 35.0.1. Fonctionne bien avec Opéra aussi et sur smartphone. A priori avec tout navigateur qui est compatible CSS3. Je ne vois pas le problème.
Mais laptop ou machine de bureau ? Parce que avec une machine de bureau c'est évident que tu ne verras pas ce problème. Avec un laptop, Mac ou Windows, là ça doit-être bien différent.

Tu as peut-être une adresse du site ?
Modifié par MagicCarpet (12 Feb 2015 - 17:21)
Cela me paraissait pourtant clair. En effet, c'est uniquement sur les images. Le fond c'est celui de mon site. Et il est bien figé, vissé, ancré. As-tu trouvé ton bonheur sur le site de Bradshaw ?
@mitteljc
Un site intéressant qui donne des informations concernant le support des propriétés CSS sur les différents navigateurs http://caniuse.com/#feat=css-animation.
Grace à ce site, vous pouvez vous rendre compte qu'une partie de votre code est inutile :
Vous pouvez supprimer toutes les propriétés préfixés -moz- et -o- (Firefox supporte la propriété sans préfixe et pour Opéra c'est le préfixe -webkit- qui est reconnu).
Et hop, 38 lignes en moins Smiley lol (évidemment, on ne peut rien faire pour IE9-)
mitteljc a écrit :
Cela me paraissait pourtant clair. En effet, c'est uniquement sur les images. Le fond c'est celui de mon site. Et il est bien figé, vissé, ancré. As-tu trouvé ton bonheur sur le site de Bradshaw ?


Eh bien désolé mais comme j'ai mon propre problème avec les images background j'ai fixé là dessus. Dans ce cas, pas de problème avec les ventilos.

Je vais regardé le site de Bradshaw demain plus en détail car je ne comprends pas du tout mon problème avec FireFox. Sous Chrome et Safari, tout est niquel, sur FF ça déconne uniquement sur les grands écrans. J'utilise Vegas Background comme JS.
Merci Freez pour ton site. Il est vrai que le code utilisé date de 2012 et que beaucoup d'octets ont coulés vers les navigateurs depuis. Smiley smile La simplification est en marche.
Modifié par mitteljc (18 Feb 2015 - 16:41)
Sujet clos
Aller à