Propriété animation

La propriété animation est une propriété raccourcie pour l'animation, permettant de définir toutes les propriétés pour l'animation simultanément : animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

L'ordre des valeurs n'a pas d'importance, la durée d'exécution de l'animation animation-duration doit obligatoirement être placée avant le délai animation-delay. Seules les propriétés animation-name et animation-duration sont obligatoires.

La propriété peut également prendre la valeur none, qui désactive complètement l'animation. Cette valeur est la valeur par défaut.

Syntaxe

sélecteur {
	animation: valeurs;
}

Exemple

Dans cet exemple, il y aura un délai de 3 secondes avant l'animation (avant chaque nouvelle lecture), puis l'animation sera lue pendant 6 secondes :

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation: move 6s infinite 3s linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Exemple . Problèmes possibles

Une animation écrite sous forme raccourcie peut ne pas fonctionner à cause de son nom. Examinons l'animation suivante :

@keyframes reverse {
	from {
		left: 0;
	}
	to {
	  left: 300px;
	}
}

Remarquez, j'utilise le nom d'animation reverse. À première vue, tout va bien, mais l'animation ne fonctionne pas, car reverse est un mot-clé valide pour la propriété animation-direction.

L'animation ne fonctionnera pas non plus si l'on utilise d'autres mots-clés comme nom dans la forme raccourcie. Mais tout fonctionne bien en utilisant la forme "complète" de description.

Parmi les mots-clés-valeurs de animation-direction qui cassent les animations, on trouve également les mots-clés liés aux fonctions de temporisation, ainsi que infinite, alternate, running, paused et ainsi de suite.

Voir aussi

la règle @keyframes,
définissant les images clés de l'animation
les transitions fluides transition, représentant une animation au survol d'un élément