[CSS]Slide avec défilement en boucle

NoSmoking

Réalisation d'un diaporama à défilement en boucle en utilisant les animations CSS et en définissant les étapes de cette animation (keyframes en anglais).

Le but ici est de calculer les données pour les étapes et non la réalisation proprement dite du diaporama.

Rendu

    Calcul

    Paramètres

    CSS animation appliqué

    Les valeurs en pourcentage dépendent du nombre d'images et des durées souhaitées pour l'animation.

    Dans l'exemple de départ ci-dessus, le temps de pause par image est de 2 secondes, le temps de déplacement d'une image à la suivante est de 1 seconde, soit pour 4 images, on ne tient pas compte de l'image ajoutée en fin de slide, la durée de l'animation est de 12 secondes.

    Chaque seconde représente donc 100% / 12 = 8.333% de l'animation.

    Principe

    Le principe consiste à ajouter en fin de liste la première image et une fois celle-ci affichée replacer la liste au début.

    Ressources