Systèmes & Technologies Informatiques 3ème SI

CSS « Animation »
✓ Les animations CSS permettent de créer des transitions entre deux états de mise en forme. Une
animation est décrite par deux choses : des propriétés propres à l'animation d'une part et un
ensemble d'étapes (keyframes) qui indiquent l'état initial, final et éventuellement des états
intermédiaires d'autre part.
Paramétrer l'animation
Pour créer une animation CSS, il faut utiliser la propriété raccourcie animation ou les
propriétés détaillées correspondantes sur un ou plusieurs éléments.
Cette propriété permet de configurer la durée, le minutage et d'autres détails à propos de
l'animation. Attention, cela ne détermine pas l'apparence visuelle de l'animation. Celle-ci
est définie en utilisant des règles CSS de mise en forme au sein de la règle @ @keyframes
comme décrit ci-après.
✓ Les propriétés détaillées rattachées à la
propriété raccourcie animation sont :

propriété rôle
animation-delay Cette propriété définit le délai entre le moment où l'élément
est chargé et le moment où l'animation commence.
animation-direction Cette propriété indique si l'animation doit alterner entre
deux directions de progressions (faire des allers-retours) ou
recommencer au début à chaque cycle de répétition.
animation-duration Cette propriété définit la durée d'un cycle de l'animation.

animation-fill-mode Cette propriété indique les valeurs qui doivent être

appliquées aux propriétés avant et après l'exécution de
l'animation.
animation-iteration- Cette propriété détermine le nombre de fois que l'animation
count est répétée. On peut utiliser le mot-clé infinite afin de
répéter une animation infiniment.
animation-name Cette propriété permet de déclarer un nom qui pourra être
utilisé comme référence à l'animation pour la règle @
@keyframes.
animation-play-state Cette propriété permet d'interrompre (« pause ») ou de
reprendre l'exécution d'une animation.
animation-timing- Cette propriété configure la fonction de minutage d'une
function
animation, autrement dit comment celle-ci accélère entre
l'état initial et l'état final notamment grâce à des fonctions
décrivant des courbes d'accélération.

Mme Lahbib Ilhem Page 1

 Systèmes & Technologies Informatiques 3ème SI

✓ @keyframes

La règle @keyframes permet aux auteurs de définir les étapes qui composent la séquence d'une
animation CSS.

Une fois qu'on a définit les propriétés propres à l'animation, on doit définir la mise en forme qui
évolue lors de cette animation. Pour cela on définit deux étapes ou plus grâce à la règle @
@keyframes. Chaque étape décrit la façon dont l'élément animé doit être affiché à un instant donné
lors de l'animation.

La durée de l'animation est définie avant et la règle @keyframes utilise donc des valeurs exprimées
en pourcentages (type CSS percentage) pour indiquer l'instant correspondant à cet état.

0% indique l'état initial de l'animation et 100% indique l'état final. Ces deux états étant très
important, il existe deux alias pour les décrire : from et to. Ces états sont optionnels et si from/0%
ou to/100% ne sont pas définis, le navigateur utilisera les valeurs calculées des différentes
propriétés.

Il est également possible d'ajouter des étapes intermédiaires, entre l'état initial et l'état final de
l'animation.

Exemple :

L'exemple suivant lie

l'animation "example" à
l'élément <div>.
L'animation durera 4
secondes et changera
progressivement la
couleur d'arrière-plan
de l'élément <div> de
"rouge" à "jaune":

Mme Lahbib Ilhem Page 2

 Systèmes & Technologies Informatiques 3ème SI

Remarque: La propriété animation-duration définit la durée d'exécution d'une animation. Si la

propriété animation-duration n'est pas spécifiée, aucune animation ne se produira, car la valeur par
défaut est 0s (0 seconde).
Dans l'exemple ci-dessus, nous avons spécifié quand le style changera en utilisant les mots-clés "from"
et "to" (qui représentent 0 % (début) et 100 % (terminé)).

Il est également possible d'utiliser des pourcentages. En utilisant le pourcentage, vous pouvez ajouter
autant de changements de style que vous le souhaitez.

Exemples :

L'exemple suivant
changera la couleur
d'arrière-plan de
l'élément <div> lorsque
l'animation sera terminée
à 25 %, terminée à 50 %,
et à nouveau lorsque
l'animation sera terminée
à 100 %

Animation-duration :4s càd L'animation durera 4 secondes

Mme Lahbib Ilhem Page 3

 Systèmes & Technologies Informatiques 3ème SI

L'exemple suivant changera à la fois la

couleur d'arrière-plan et la position de
l'élément <div> lorsque l'animation sera
terminée à 25 %, à 50 % et à nouveau
lorsque l'animation sera terminée à
100 %

La propriété animation-iteration-
count spécifie le nombre de fois
qu'une animation doit s'exécuter.

L'exemple suivant exécutera

l'animation 3 fois avant de s'arrêter .

Mme Lahbib Ilhem Page 4

 Systèmes & Technologies Informatiques 3ème SI

La propriété animation-timing-function peut avoir les valeurs suivantes :

• Ease : Spécifie une animation avec un démarrage lent, puis rapide, puis se termine
lentement (c'est la valeur par défaut)
• Linear : Spécifie une animation avec la même vitesse du début à la fin
• ease-in : Spécifie une animation avec un démarrage lent
• ease-out : Spécifie une animation avec une fin lente
• ease-in-out : Spécifie une animation avec un début et une fin lents
• cubic-bezier(n,n,n,n) : Vous permet de définir vos propres valeurs dans une
fonction cubique-bézier

La propriété animation-direction peut avoir les valeurs suivantes :

• Normal : L'animation est jouée normalement (en avant). C'est par défaut
• Reverse : L'animation est jouée en sens inverse (vers l'arrière)
• Alternate : L'animation est d'abord jouée en avant, puis en arrière
• alternate-reverse : L'animation est d'abord lue en arrière, puis en
avant

Mme Lahbib Ilhem Page 5