Défilé continu

Exemple publié le 31 Octobre 2016:

Pour ce montage, il faut enchaîner deux animations afin que l'une s'affiche à la disparition de l'autre et ne pas avoir de coupure dans le mouvement.

Dans le code ci-dessous, j'ai supprimé les images pour que le principe soit plus clair;  dans le cas de liens sur image, il faut pouvoir arrêter l'arrêt au survol par des boutons extérieurs: voir entête rubrique articles ; la vitesse des animations est à votre choix..

<div id="ab">
<p id="ac">&nbsp;</p>
<p id="ad">&nbsp;</p>
</div>
<style><!--
#ab{width:800px; height:60px; border:1px solid black; overflow:hidden; margin:10px auto; }
#ac{width:800px; height:60px; line-height:50px; background:pink; animation:f1 10s linear infinite; animation-play-state: running; }
#ad{width:800px; height:60px; line-height:50px; background:lime; animation:f2 10s linear infinite; animation-play-state: running;}
@keyframes f1{
 0% {transform:translate(0px,0px);}
 50% {transform:translate(-800px,0px);}
 50.01%{transform:translate(800px,0px);}
 100% {transform:translate(0px,0px);}
 }
@keyframes f2{
 0% {transform:translate(800px,-60px);}
 50% {transform:translate(0px,-60px);}
 100% {transform:translate(-800px,-60px);}
  }
--></style>

Ce qui peut donner, en ajustant les largeurs: