✅ HTML5 - Animations

Table des matières

Les animations sont des effets comme les transitions mais dont la fonctionnalité est améliorée, dans le sens où il y a un contrôle supérieur sur ce qui peut être fait, en raison de la disponibilité de plus d'options pour apporter des modifications d'un style à un autre.
Propriétés de l'animation
Comme nous l'avions dit précédemment, les animations sont des transitions améliorées en raison du nombre d'options et de propriétés qui nous permettent d'avoir un meilleur contrôle sur elles, nous allons passer en revue chacune d'entre elles :

délai d'animation : Appliquez une heure précise pour pouvoir démarrer l'animation une fois celle-ci activée.
direction de l'animation : Spécifie si l'animation doit être lue à l'envers ou en cycles alternés.
durée-animation : Indique la plage de temps dans laquelle l'animation doit être jouée.
nombre d'itérations d'animation : Indique le nombre de fois que l'animation doit être répétée, et peut même placer la valeur infini pour des répétitions infinies de la même chose.
nom-animation : Spécifie le nom de l'animation.
état de lecture de l'animation : Permet à l'animation d'être mise en pause, puis de continuer à jouer.
animation-timing-func : Spécifiez comment les valeurs intermédiaires doivent être traitées dans l'animation
animation: C'est le raccourci avec lequel nous pouvons incorporer toutes les propriétés d'animation dans une seule déclaration CSS et a la structure suivante :

animation:
Maintenant que nous connaissons les propriétés disponibles, voyons un exemple de code pour l'analyser :

Exemple

Il existe de nombreuses sortes de fruits - il existe plus de 500 variétés de bananes à elles seules. Au moment où nous ajoutons les innombrables types de pommes, d'oranges et d'autres fruits bien connus, nous sommes confrontés à des milliers de choix.

Dans cet exemple, nous voyons qu'au moment de faire : survoler sur l'élément nous aurons un délai de 100ms puis l'animation aura 500ms à effectuer et elle sera répétée un nombre infini de fois.
Ensuite, nous voyons qu'avec le nom que nous avons donné à l'application, nous utiliserons la propriété @images clés c'est là que nous vous dirons quels éléments vont être animés.
Voyons à quoi cela devrait ressembler dans notre navigateur :

AGRANDIR

Comme on le voit il y a un changement dans l'arrière-plan de l'élément puis la couleur de la lettre et la taille de la police, à la fin de l'animation il revient à l'état initial et tout ce processus est répété à nouveau, cela lui donne un mouvement qui n'existe pas avec l'utilisation de transitions.
Avec cela, nous démontrons également l'importance du nom de l'animation puisqu'il sert d'identifiant pour pouvoir lui attribuer un @images clés.
Avec cela, nous terminons le didacticiel et avec cela, nous sommes déjà en mesure d'effectuer des animations de base, afin de fournir plus de mouvement à nos documents HTML.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif