Sommaire

Les Animation:créeranimations

1. Créer des animations

Comme toute animation, les animations CSS se déroulent dans le temps. Le temps est géré par les « images-clés », les keyframes en anglais. Une image-clé est une étape dans une animation où l’élément animé opère un changement. Ce changement s’applique sur une propriété CSS. C’est la règle @keyframes qui gère les étapes de votre animation. Chaque animation doit avoir une règle @keyframes nommée. Une des différences qu’il y a avec les transitions, c’est que les animations n’ont pas besoin d’un événement pour les déclencher.

Vous devrez déterminer les différentes étapes de votre animation dans le temps et indiquer les changements à apporter aux différentes propriétés CSS. Chaque étape dans le temps pourra être identifiée avec une valeur de pourcentage. La valeur 0% représente le début et 100% indique la durée totale de l’animation.

Pour créer les animations, nous allons utiliser plusieurs propriétés.

Vous allez pouvoir indiquer combien de temps doit durer l’animation avec la propriété animation-duration.

La cinétique de l’animation est gérée par la propriété suivante : animation-timing-function.Vous pourrez appliquer des accélérations ...