Un slideshow automatique grâce aux keyframes

Je vous ai fait débuter par le plus complexe avec le concept de :target, juste pour vous faire souffrir ;) Vous allez vraiment apprécier cette technique un peu plus simple qui consiste à laisser tourner l'animation en la faisant passer par différentes étapes. Le principe est relativement simple, nous allons reprendre notre toute première version du slideshow précédent, lui retirer les deux liens et ajouter un élément pour bien visualiser les transitions.

<div id="slideshow">
	<ul id="sContent">
		<li><img src="images/bleu.png" alt="Image bleue" /></li><!--
		--><li><img src="images/vert.png" alt="Image verte" /></li><!--
		--><li><img src="images/brun.png" alt="Image brune" /></li>
	</ul>
</div>

Notre CSS va ensuite définir une animation par images-clefs. Cela va se dérouler comme sur une ligne de temps (timeline pour les intimes de Flash) allant de 0% à 100%. La durée sera donnée seulement lorsque l'animation sera appliquée à un élément. À chaque image-clef nous définirons les propriétés à changer ainsi que la position du curseur sur notre ligne de temps. Voici ce que cela donne concrètement :

@keyframes AutoSlide {
	0% {
		left: 0px; /*1ère image*/
	}
	15% {
		left: 0px; /*idem pour attente*/
	}
	35% {
		left: -150px; /*2ème image*/
	}
	50% {
		left: -150px; /*idem pour attente*/
	}
	70% {
		left: -300px; /*3ème image*/
	}
	85% {
		left: -300px; /*idem pour attente*/
	}
	100% {
		left: 0px; /*1ère image*/
	}
}

Dans un premier temps nous annonçons l'utilisation des keyframes. Puis nous donnons un nom à cette animation, ici AutoSlide.

Une autre manière d'écrire cette même animation serait celle-ci:

@keyframes AutoSlide {
	0%,15%,100% {
		left: 0px; /*1ère image*/
	}
	35%,50% {
		left: -150px; /*2ème image*/
	}
	70%,85% {
		left: -300px; /*3ème image*/
	}
}

Cette syntaxe permet de gagner en place en regroupant les points d'étape.

Ne pas oublier les préfixes vendeurs pour chaque navigateur (ex : @-moz-keyframes , @-webkit-keyframes

- Il est aussi possible de remplacer 0% et 100% respectivement par from et to.
- Il est également possible d'utiliser des valeurs en pourcentage pour left.

Continuons en réattribuant les styles précédemment utilisés à notre slide :

#slideshow {
	position: relative;
	width: 150px;
	height: 150px;
	margin:  20px auto;
	overflow: hidden;
}
#sContent li {
	display: inline;
}

Puis les styles concernant l'élément qui défile dans son conteneur :

#sContent {
	position: absolute;
	top: 0;
	left: 0;
	width: 450px;
	margin: 0;            
	padding: 0;
	
	/*CSS3 keyframes animation*/
	animation-name: AutoSlide;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

Voir l'exemple

Faisons un petit récapitulatif :

Quelques propriétés d'animation liées aux Keyframes en CSS3

Nom de la propriété	Explication
animation-name	Le nom de l'animation à utiliser sur l'élément ciblé
animation-duration	La durée de l'animation, définit la durée entre 0% et 100% (from et to) Valeur : durée (ms, s, etc.)
animation-iteration-count	Nombre de boucle (répétition que dois faire l'animation). Valeur : nombre ou infinite
animation-timing-function	Fonction de modification de l'interpolation de l'animation. Valeur : ease-in, ease-out, ease-in-out, etc.
animation-direction	Comportement de la tête de lecture de l'animation (sens de lecture) Valeur : alternate, normal
animation-delay	Impose un délais avant le début de l'animation Valeur : durée (ms, s, etc)
animation-play-state	Statut de lecture de l'animation Valeur : running, paused
Plus d'informations

Et voilà, c'est tout pour ce tutoriel. J'espère que celui-ci aura éveillé votre curiosité sur la prochaine version de CSS !

Vous pouvez visiter, toujours sur mon petit espace de tests, mon premier essai à ce sujet : Slideshow Automatique avec CSS3.

La prochaine étape est dédiée aux curieux, il s'agira plutôt d'une invitation à la discussion et à l'amélioration des techniques utilisées.