Niveau : Expert

Slideshow en CSS3

Tutoriel par (WebDesigner grapilleur de Kiwiz, Strasbourg)
Créé le , mis à jour le (124538 lectures)
Tags : css, xhtml, animation, css3, transitions, images-clefs, keyframes, slideshow, iteration-count

Sommaire


Un slideshow à défilement automatique

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 pour chaque navigateur (@-moz-keyframes , @-webkit-keyframes, etc.)

- 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.

Vous trouverez également un tutoriel plus complexe sur la réalisation d'un slideshow qui combine contrôle au clic et défilement automatique sur mon blog personnel :
Créer un slideshow automatique et contrôlable en 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.