[CSS3] Animation qui change le background-image à durée inégale

Fermé
Quentin - 10 avril 2015 à 11:26
 Quentin - 13 avril 2015 à 11:01
Bonjour à tous.

J'ai un petit problème, je ne suis pas débutant en développement web mais un soucis m'est parvenu lorsque je voulais créer une animation.

J'ai une div appelée "first" dans laquelle je veux que 3 images s'affichent les unes à la suite des autres en fondu. Pour cela, j'ai mis ces 3 images dans une animation. Le problème c'est que les temps d'affichage des images sont inégaux.

Voici le .css (le .html contient uniquement ma div) :
body {
margin: 0;
padding: 0;
height: 700px;
overflow: hidden;
}

#first {
text-align: center;
width: 100%;
height: 100%;
background-image: url("wa.jpg");
background-size: 100% 100%;
-webkit-animation: imgFondu infinite alternate 30s;
animation-timing-function: linear;
/* -webkit-animation: [name] [iteration] [direction] [duration] [delay] */
}


/* - On affiche wa.jpg
- On affiche ensuite wa1.jpg en fondu
- On affiche ensuite wa2.jpg en fondu
- L'animation revient sur ses pas grâce à ALTERNATE
- On raffiche wa1.jpg en fondu
- On raffiche wa.jpg en fondu
- On recommence l'opération à l'infini grâce à INFINITE */

@-webkit-keyframes imgFondu {
0%{
background-image: url("wa.jpg");
}
20%{
background-image: url("wa.jpg");
}
40%{
background-image: url("wa1.jpg");
}
60%{
background-image: url("wa1.jpg");
}
80%{
background-image: url("wa2.jpg");
}
100%{
background-image: url("wa2.jpg");
}
}


Merci d'avance !

2 réponses

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 721
Modifié par animostab le 10/04/2015 à 15:01
Salut c'est normal
40% du temps pour la 1ere
40% pour la 2eme
20% pour la 3ème

fait plutot
0% 1er img

33% 2eme img

66% 3eme img

100% 1er img


Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
0
Merci, c'est ce que je pensais faire mais en fait mes images, je voudrais qu'elles restent affiché une dizaine de seconde chacune avant de partir en fondu.

Avec ta proposition, la première image part en fondu directement.

J'avais trouvé un truc pas trop dégueu en bricolant mais ça reste de la bricole :

@-webkit-keyframes imgFondu {
0%{
background-image: url("wa.jpg");
}
33%{
background-image: url("wa.jpg");
}
43%{
background-image: url("wa1.jpg");
}
76%{
background-image: url("wa1.jpg");
}
86%{
background-image: url("wa2.jpg");
}
100%{
background-image: url("wa2.jpg");
}
}
0