Blog iamvdo.me
Comme pour l’article Slider Galerie photos en CSS3, utilisation des animations CSS pour réaliser cet effet.
Sauf qu’ici, l’animation est continue et tourne en boucle.
Pour réaliser cet effet, une adaptation du code HTML a été nécessaire : pour cela, copiez les 3 premières images du slideshow à la fin du bloc à déplacer. Cela est du au fait que lors de l’animation, on voit en permanence 3 images.
Voici l’animation utilisée :
ul{
display: table;
width:2700px;
-webkit-animation: slideAnim 20s ease 0s infinite;
-moz-animation: slideAnim 20s ease 0s infinite;
-ms-animation: slideAnim 20s ease 0s infinite;
-o-animation: slideAnim 20s ease 0s infinite;
animation: slideAnim 20s ease 0s infinite;
}
ul li{
display: table-cell;
width:300px;
}
@keyframes slideAnim{
from,11%,to {margin-left:-300px;}
15%,26%{margin-left:-600px;}
30%,41%{margin-left:-900px;}
45%,56%{margin-left:-1200px;}
65%,76%{margin-left:-1500px;}
80%,91%{margin-left:-1800px;}
99.99%{margin-left:-2100px;}
}Note : ne pas oublier de recopier 5 fois la déclaration des étapes @keyframes
Nous avons donc le bloc <ul> composé de 9 images (6 + la copie des 3 premières) sur lequel on lance l’animation.
Pourquoi ça tourne en boucle ?
Juste avant la fin de l’anim, on déplace tout le bloc en position de départ très rapidement (en 0,01% dans ce cas). Cela provoque une superposition des images invisible à l’oeil nu. L’animation reprend donc depuis le début, mais on a l’impression qu’elle continue...
#1par Geoffrey, le 25 novembre 2011
Hello Vincent,
Cela fonctionne parfaitement avec Firefox également, pourquoi s’en priver ?
http://www.creativejuiz.fr/trytotry...
Bonne continuation
#2par css3create, le 25 novembre 2011
@Geoffrey : tout simplement parce que je n’ai pas pris le temps de mettre à jour mes démos. _ ;) Il faut que j’arrête de repousser la mise à jour...
#3par Philippe, le 25 juin 2012
Bonjour,
Ça marche aussi avec opéra 12. Reste à tester avec IE. Qui s’y colle ?????
A+
Philippe
#4par MonsieurPixel, le 9 juillet 2012
J’ai essayé sur explorer (J’ai honte d’avoir fait ça) et sans surprise ça ne marche pas.
#5par Belabela, le 12 septembre 2012
Magnifique ce site web est magnifique, sûr ce bonne continuation !
#6par Andry, le 29 septembre 2012
Cooool !!!
#7par JayLow, le 6 décembre 2012
Salut, Très bon tuto !
Mais j’ai un problème avec "@keyframes" il n’est pas accepter dans mon css à cause des
{}Comment je peux faire pour qu’il soit accepter ?
#8par J@m1n, le 8 mars
Bonjour,
Est-ce normal que je ne vois rien sur votre site ??? Sous IE, Moz et Chrome ???
Merci ;)
#9par css3create, le 8 mars
@J@m1n : Effectivement, je viens de corriger cela. Merci.
#10par Atypha, le 27 avril
Super tuto et magnifique site web !
#11par Patrick, le 10 mai
Rien à dire... Excellent boulot. Une nouvelle source d’inspiration ! Bravo.