Une animation peut être lancée lors d'un changement de pseudo-classe (:hover, :focus, :target, :checked), lors d'un changement de "class" via Javascript, ou simplement lors du chargement de la page.
Les animations consistent en deux composants : un style décrivant l'animation et un ensemble de keyframes qui indique les états de début et de fin du style CSS de l'animation, ainsi que des points de passage intermédiaires.
Les avantages des animations CSS par rapport aux techniques d'animation utilisant des scripts habituelles :
- Elles sont faciles à utiliser pour les animations simples ; leur création est possible sans aucune connaissance en JavaScript.
- Les animations sont fluides,
- le navigateur contrôle la séquence d'animation ce qui lui permet d'optimiser sa performance et son efficacité.
div.spriteContainer {
height: 120px;
margin: 1rem;
width: 118px;
animation:sprite .8s steps(6) infinite alternate;
-webkit-animation:sprite .8s steps(6) infinite alternate; /* Prefix for Safari and Chrome */
background-image:url(11/img/sprite.jpg);
}
@keyframes sprite {
0% {background-position:0;}
100% {background-position:-710px;}
}
@-webkit-keyframes sprite /* Prefix for Safari and Chrome */
{
0% {background-position:0;}
100% {background-position:-710px;}
}
Configuration de l'animation
L'élément que vous souhaitez animer, doit avoir la propriété animation et des sous-propriétés.
Cela vous permettra de configurer la temporisation et la durée de l'animation, ainsi que d'autres détails concernant la manière dont l'animation se déroule.
L'apparence réelle de l'animation sera définie par les règles @keyframes.
Mais d'abord voyons les sous-propriétés de la propriété animation :
animation-delay:
Configure le délai entre l'instant auquel l'élément est chargé et le début de l'animation.
animation-direction:
Configure si l'animation doit se jouer tour à tour en avant puis en arrière à chaque cycle de la séquence ou si elle doit revenir à son point de départ ou se répéter :
- animation-direction: normal;
L'animation doit se jouer vers l'avant à chaque cycle. En d'autres termes, à chaque fois que l'animation fait un cycle, elle est réinitialisée à son début et recommence de nouveau. Ceci est la valeur par défaut de cette propriété.
Roule !
- animation-direction: alternate;
L'animation doit changer de sens à chaque cycle. Lorsqu'elle est jouée à l'envers, les étapes de l'animation sont appliquées à reculons. De plus, la temporisation est aussi inversée. Par exemple une animation ease-in est remplacée par une animation ease-out lorsqu'elle est jouée à l'envers.
Roule !
- animation-direction: reverse;
L'animation est jouée à l'envers à chaque cycle. A chaque fois que l'animation fait un cycle, elle est réinitialisée à son début et recommence de nouveau.
Roule !
- animation-direction: alternate-reverse;
Comme pour la valeur alternate, l'animation change de sens à chaque cycle. L'animation est jouée à l'envers lors du premier cycle, puis à l'endroit, ensuite à l'envers, et ainsi de suite.
Roule !
animation-duration:
Configure la durée que l'animation doit utiliser pour compléter un cycle.
animation-iteration-count:
Configure le nombre de fois que l'animation doit se répéter : vous pouvez définir infinite pour que l'animation se répète indéfiniment.
animation-name:
Définit le nom de l'animation utilisée aprés @keyframes décrivant les étapes.
animation-play-state:
Vous permet de mettre en pause et de reprendre la lecture de la séquence animée :
running ou paused.
Exemple avec javascript
animation-timing-function:
Configure la temporisation de l'animation ; c'est-à-dire, comment l'animation se déroule entre les keyframes, en définissant les courbes d'accélération.
Il est possible d'utiliser cette propriété au sein même des étapes de l'animation(@keyframes) afin de rédéfinir un timing différents pour chaque étape.
ease - départ lent, rapide, puis fin lente
linear - même vitesse du début à la fin
ease-in - Départ lent et fin rapide
ease-out - Départ rapide et fin lente
ease-in-out - specifies an animation with a slow start and end
cubic-bezier(n,n,n,n) - écrire sa propre fonction d'une courbe de bézier
steps - Écrie le nombre d'étapes de l'animation
animation-fill-mode:
Cette propriété définit l'état de départ et de fin de votre animation. Voici les différentes valeurs possibles :
forwards;
indique au navigateur de laisser l'élément dans sont état final lors de la dernière itération. L'élément ne revient pas à son état initial
backwards;
indique au navigateur de placer l'élément dans son état définit au keyframe 0% au chargement de la page, même si un délai négatif est indiqué.
both;
appliquera les deux valeurs précédentes.
none;
indiquera au navigateur de styler l'élément selon son état à la première keyframe visible et de ramener l'animation à la keyframe 0% après la dernière itération.
Ceci est le comportement par défaut.
h1 {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in;
}
