CSS > Les transitions et les animations

Différence entre transition et animation : les animations permettront un contrôle très précis dans le temps de la valeur que prendront les différentes propriétés CSS

Une animation peut être lancée lors d’un changement de pseudo-classe (:hover, :focus, :active, :target,:checked), lors d’un changement de class via Javascript, ou simplement lors du chargement de la page.

Les animations se déroulent dans le temps, géré par les keyframes.

Une keyframe est une étape dans une animation où l’élément animé opère un changement.

C’est la règle @keyframes qui gère les étapes de votre animation, chaque animation doit avoir une règle @keyframes nommée.

Vous devrez déterminer les différentes étapes de votre animation et y indiquer les changements à apporter aux différentes propriétés. Chaque étape pourra être identifiée avec une valeur de pourcentage, 100 % étant la durée totale de l’animation.

Pour réaliser une animation, il faut deux éléments distincts: une déclaration d’images-clé s(keyframe) définie au sein d’une @-rule, et un lien d’un sélecteur vers cette animation au sein d’un bloc de code CSS.

Exemple :

@keyframes monanimation {
    0% {color: blue;}
  100% {color: red;}
}
selecteur:hover,selecteur:focus,selecteur:active {
    animation: monanimation 1.5s ease-in-out;
}

Les keyframes représentent le déroulement de l’animation. Les valeurs en pourcentage représentent un moment temporel précis de l’animation. Ainsi, 10% représentera la 6ème seconde d’une animation durant une minute.

Il est à noter que les keyframes 0% et 100% sont obligatoires (leur omission empêchera le fonctionnement de votre animation sur certains navigateurs).

-webkit- est requis

 

Remarques :Une transition est effectuée entre chaque keyframe rendant l’animation plus fluide.

Si plusieurs keyframes ont la même valeur, il est possible de les insérer sur la même ligne en les séparant d’une virgule :

40%, 70%, 90%{bottom: 0;}3. Les propriétés liées à l’animation animation-name

La propriété CSS animation-name spécifie une liste d’animations qui doivent être appliquées à l’élément sélectionné.

Chacun des noms indique une règle @keyframes qui définit les valeurs des propriétés pour la séquence animée.

Ex : animation-name: spirale ;animation-duration

Vous allez pouvoir indiquer combien de temps doit durer l’animation avec la propriété animation-duration.(peut être définie en seconde (s) ou en millisecondes (ms).

Ex : animation-duration: 6s

animation-timing-function

La cinétique de l’animation est gérée par la propriété animation-timing-function.

Des accélérations et des ralentissements pourront être appliquées, à l’identique que pour les transitions.

Ex : animation-timing-function: ease-in-out

animation-timing-function est la seule propriété d’une animation à pouvoir être insérée au sein d’une keyframe.

Exemple :0% {bottom: 200px;left: 0;-webkit-animation-timing-function: ease-in;}

100% {left: 110px;bottom: 0;-webkit-animation-timing-function: ease-out;}

 

animation-delay indique si l’animation doit commencer avec un délai et non pas immédiatement.

Ex : animation-delay: 3sanimation-iteration-count

animation-iteration-count indique combien de fois doit se répéter une animation (animation-iteration-count: 3 | infinite)

animation-direction indique si l’animation doit se jouer dans le sens inverse (animation-direction: normal | reverse | alternate)

animation-play-state indique si l’animation est jouée ou si elle est interrompue (animation-play-state: paused | running

Vous pouvez utiliser la syntaxe courte animation en indiquant les propriétés dans l’ordre ci-dessus.

Exemple: un déplacementL’objectif : déplacer, sans fin, une boîte <div> de gauche à droite, puis de droite à gauche.

La structure : une boîte <div> identifiée #boite avec une mise en forme très simpleMise en œuvre1. Déterminer les étapes de notre animation avec la règle @keyframes.

Chaque animation doit avoir une règle @keyframes nommée.@-webkit-keyframes redBox 1 {0% {left: 10px }50% {left: 400px;}100% {left: 10px;}}

@keyframes redBox {0% {left: 10px }50% {left: 400px;}100% {left: 10px;}}La boîte rouge doit aller à une position fixée à la moitié de la durée totale, puis revenir à sa position initiale à la fin de l’animation. Nous aurons donc trois keyframes : à 0%, 50% et 100%.À chaque étape nous indiquerons la position à atteindre avec la propriété left.

L’animation est nommée redBox.

Dans les propriétés CSS de la boîte <div>, nous indiquons les propriétés nécessaires :

#boite {

background-color: red;

position: relative;

width: 100px;

height: 100px;

-webkit-animation-name: redBox;

-webkit-animation-duration: 5s;

-webkit-animation-iteration-count: infinite;

animation-name: redBox;animation-duration: 5s;

animation-iteration-count: infinite;

}

Les préfixes ne sont obligatoires que pour webkit (Mai 2015)

 

Le nom de l’animation, animation-name. La durée de l’animation, animation-duration .Les itérations de l’animation, animation- iteration-count.

Les mêmes propriétés en syntaxe courte :

#boite {background-color: red;position: relative;width: 100px;height: 100px;-webkit-animation: redBox 5s infinite;animation: redBox 5s infinite;}

 

Les générateurs en lignehttp://cssanimate.com/http://www.css3maker.com/css3-animation.htmlhttp://www.css3animationgenerator.com/

—

 

Un article fort intéressant à cette adresse (AlsaCréations) :

http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html