Animations

Le langage CSS permet d’ajouter des animations sans avoir besoin d’utiliser Adobe Flash ni JavaScript.

Une animation permet à un élément de passer graduellement d’un style à un autre. En CSS, pour créer une animation, il est possible de changer des propriétés autant de fois qu’il est jugé nécessaire.

Pour utiliser les animations en CSS, il faut commencer par déclarer des “images clés” (keyframes, en anglais). Ces keyframes “retiennent” quel style aura un élément à un moment donné.

La règle @keyframes

Lorsque du style CSS est déclaré dans un @keyframes, l’élément va graduellement changer d’un style à l’autre à un moment donné.

Pour qu’une animation fonctionne, il faut lier cette dernière à un élément.

Exemple :

/* Code pour l'animation, qui passera d'un arrière-plan rouge à un arrière-plan jaune */
@keyframes exemple {
    from { background-color: red; }
    to { background-color: yellow; }
}

div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: exemple; /* Ici, l'animation "exemple" déclarée dans le @keyframe est lié à la div */
    animation-duration: 4s; /* L'animation dure 4 secondes */
}

Remarque : Pour que l’animation fonctionne, il faut obligatoirement qu’une durée soit définie dans la propriété animation-duration. Si tel n’est pas le cas, l’animation ne se lancera pas, car la durée par défaut est de 0 seconde.

Retarder une animation

La propriété CSS animation-delay permet de retarder le lancement d’une animation.

Exemple :

div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: exemple;
    animation-duration: 4s; 
    animation-delay: 2s; /* Le navigateur attend 2 secondes avant de lancer l'animation */
}

Remarque : Les valeurs négatives sont également prises en compte. Dans un tel cas, l’animation démarrera comme si elle avait déjà été jouée pendant N secondes avant le chargement d’une page par exemple.

Définir combien de fois une animation doit se lancer