Création d'animations CSS avec @keyframes

Apprendre les meilleures façons d'utiliser CSS peut parfois donner l'impression suivante :

Pour éviter ^^ Je veux partager une façon simple et élégante de créer des animations CSS en utilisant keyframes. Quand on y pense, animer un élément consiste en fait à changer le style ou l'apparence de cet élément d'une période à l'autre. Ce style pourrait être n'importe quoi. Cela peut être la position de cet élément sur la page, sa couleur, sa forme, sa taille. Vous le nommez, vous pouvez l'animer.

Ce @keyframesqui nous donne, c'est un ensemble de règles et de moments auxquels modifier notre élément d'une manière spécifique, mettant ainsi en place l'animation.

keyframesIl s'agit d'une animation simple qui transforme un carré rouge 100px x 100px div elementen class “movingBox"un cercle jaune lorsqu'il glisse vers le bas de la page.

Chaque règle de notre keyframes mymovedécrit comment notre élément doit être rendu à un moment précis de notre animation. A 0% au début de notre animation, notre élément est un carré rouge en haut de la page. À 100 %, lorsque notre animation est terminée, notre carré s'est transformé en un cercle jaune à 100 px de la limite supérieure de son espace.

Pour implémenter cette animation simple sur notre div class="movingBox"tout ce que nous avons à faire est d'ajouter la animationpropriété aux .movingBoxstyles dans notre CSS.

La animationpropriété est une propriété abrégée qui peut contenir des informations concernant :

animation-title: 
animation-duration: 
animation-timing-function: 
animation-delay: 
animation-iteration-count: 
animation-direction: 
animation-fill-mode: 
animation-play-state:

Et si nous voulions créer une animation qui fait apparaître un élément sur la page à partir de rien ? Pensez à une page Web où, lorsque vous arrivez, vous voyez le titre de la page zoomer (ou glisser) depuis un autre endroit et atterrir en plein centre de la page.

Dans notre moveInLeft keyframes, nous avons défini notre élément comme commençant à une position qui est -100px sur l'axe X ( transform: translateX(-100px)) à partir de laquelle nous l'avons configuré pour être dans notre style de l'élément. Nous voyons qu'à 80 % de notre animation, notre élément dépasse sa position désignée sur l'axe X, puis atterrit exactement là où il est programmé à 100 %.

100% { 
   opacity: 1;
   transform: translate(0)
}

L'utilisation keyframesest un moyen simple et propre d'animer n'importe quel élément HTML. Si vous ne l'avez pas encore essayé, je vous recommande de créer un document et de jouer avec !