Créer et utiliser des animations est une opération qui ressemble largement aux transitions dans la façon de les mettre en oeuvre. Globalement, il s'agira de mentionner les propriétés qui changent, la durée de l'animation. Mais on pourra ici aller plus loin en jouant :
sur presque toutes les propriétés
sur des étapes intermédiaires dans l'animation de manière à l'enrichir
Définir le scénario de l'animation
La règle @keyframes (ou @-webkit-keyframes pour chrome) va permettre de scénariser notre animation en définissant les images-clés et les changements qui vont s'y opérer. La syntaxe de base est la suivante :
@keyframes nom_animation {}
On définira alors, à l'intérieur des accolades, les différentes étapes de l'animation soit en utilisant des mots-clés soit des chiiffres indiquant la position dans le développement temporel de l'animation.
Les deux mots-clés les plus utilisés sont from et start qui correspondent à l'état au début et à la fin de l'animation. Ils correspondent aux valeurs 0% et 100%.
Remarquez qu'au niveau de la règle d'animation, on ne parle pas en seconde ou en frames mais en pourcentage. La durée de l'animation en valeur temporel sera définie ailleurs.
Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.
Vous devriez rafraîchir la page.