Dans le but d'embellir votre conception Web, l'ajout d'animations est fortement recommandée. Les animations sont appelées un changement en douceur dans le style d'élément. CSS vous permet d'ajouter des animations à divers éléments avec une grande facilité.

Lorsque vous appliquez des animations à divers éléments CSS, vous devez indiquer des images clés pour l'animation. Le @keyframes La règle spécifie qu'un élément changera son style actuel en celui spécifié à des moments particuliers. De plus, vous devez attacher une animation à un élément particulier pour que l'animation fonctionne.

Il existe différentes propriétés d'animation CSS qui sont utilisées dans le but d'ajouter des animations à divers éléments CSS, nous avons discuté de ces propriétés ci-dessous.

Propriétés d'animation CSS

CSS fournit diverses propriétés d'animation qui sont expliquées en détail ci-dessous.

nom d'animation

Cette propriété est utilisée pour définir un nom pour les @keyframes.

Syntaxe

nom d'animation: aucun | KeyFramename | Initial | hériter;

Le Keyframename Le paramètre définit un nom pour l'image clé que vous désirez attacher à un élément.

Exemple
Considérez l'exemple ci-dessous pour comprendre comment fonctionne cette propriété.

Html

Bonjour le monde

Ici, nous avons défini un

élément sur lequel nous appliquerons l'effet d'animation.

CSS

p
taille de police: 30px;
Position: relative;
nom d'animation: animation;
Durée d'animation: 5s;

@KeyFrames Animation
de gauche: 0px;
à gauche: 200px;

Avant d'appliquer l'effet d'animation, nous avons d'abord fixé la taille de la police et la position du paragraphe. Plus tard, nous avons attribué aux images clés un nom et en utilisant la règle @keyframes, nous définissons que l'animation fera passer le paragraphe de 0px à 200px de la gauche.

Notez qu'il est important de définir la durée de l'animation sinon cela ne fonctionnera pas.

Sortir

L'animation fonctionne correctement.

durée d'animation

Cette propriété définit l'heure à laquelle une animation devrait prendre pour terminer un cycle.

Syntaxe

Durée d'animation: temps | Initial | hériter;

Le paramètre de temps définit l'heure de l'animation.

Exemple
Voici comment vous pouvez définir la durée d'une animation.

Html

Nous avons simplement défini un élément div.

CSS

div
Largeur: 100px;
hauteur: 100px;
Color en arrière-plan: marron;
Position: relative;
nom d'animation: animation;
Durée d'animation: 3S;

@KeyFrames Animation
de gauche: 0px;
à gauche: 200px;

En plus de styliser le conteneur Div, nous avons fixé la durée de l'animation à 3 sec. Cela signifie que l'animation continuera à jouer pendant 3 secondes.

Sortir

L'animation est jouée pendant 3 secondes.

délai d'animation

Cette propriété définit la période d'attente avant le début de l'animation.

Syntaxe

Animation-retard: Temps | Initial | hériter;

Le paramètre de temps définit le temps d'attente avant le début de l'animation, cependant, il est facultatif.

Exemple
Supposons que vous souhaitiez retarder votre animation pendant 2 secondes, puis suivez le code ci-dessous.

CSS

div
Largeur: 100px;
hauteur: 100px;
Color en arrière-plan: marron;
Position: relative;
nom d'animation: animation;
Durée d'animation: 5s;
Animation-retard: 2s;

@KeyFrames Animation
de gauche: 0px;
à gauche: 200px;

Le code ci-dessus spécifie que le conteneur DIV passera de 0px à 200px de la gauche pendant 5 secondes après une période d'attente de 2 secondes.

Sortir

L'animation a été retardée pendant 2 secondes, puis a commencé comme souhaité.

animation-timing-fonction

Cette propriété définit la courbe d'accélération de l'animation.

Syntaxe

Animation-TIMing-Function: Facilité | linéaire | Facilité | Facilité-sortie | Faisition-ou-out | Cubic-Bezier (n, n, n, n);

Tous les paramètres sont expliqués ci-dessous.

• faciliter: L'animation se produit de manière lente à casser.
• linéaire: L'animation aura la même vitesse du début à la fin.
• facilité dans: L'animation aura un début lent.
• Facturation: L'animation aura une fin lente.
• Faisition en dehors: L'animation aura un début lent ainsi qu'une fin lente.
• cubic-bezier (n, n, n, n): Les valeurs de l'animation seront définies de manière cubique plus grande.

Exemple
L'exemple ci-dessous montre le paramètre de facilité de la propriété en discussion.

CSS

div
nom d'animation: animation;
Durée d'animation: 5s;
Animation-TIMing-Function: facilité;

@KeyFrames Animation
de gauche: 0px;
à gauche: 200px;

Nous avons défini la valeur de la fonction d'animation pour faciliter la facilité.

Sortir

L'animation joue de façon à sauter lente.

compte d'animation-itération

Cette propriété définit combien de fois une animation jouera.

Syntaxe

Animation-iteration-Count: Numéro | Infini | Initial | hériter;

Le paramètre de nombre définit le nombre de fois qu'une animation sera jouée, en attendant, le paramètre infini définit que l'animation jouera infiniment.

Exemple
Comprenons le fonctionnement de la propriété d'animation-it iteation-comptable en utilisant l'exemple suivant.

CSS

div
nom d'animation: animation;
Durée d'animation: 5s;
compte d'animation-itération: 2;

@KeyFrames Animation
de en haut: 0px;
à en haut: 100px;

Le code ci-dessus définit que l'animation fera passer le conteneur div de 0px à 100px du haut pendant 5 secondes deux fois.

Sortir

L'animation est jouée deux fois comme spécifié dans le code.

direction d'animation

Cette propriété définit la direction dans laquelle l'animation se déplacera. Les instructions peuvent être en avant, en arrière ou commutation entre les deux.

Syntaxe

Direction d'animation: Normal | Inverse | Alternate | Alternate-Reverse | Héritage | initial;

Tous les paramètres sont expliqués ci-dessous.

• normal: Il s'agit d'un paramètre par défaut qui joue l'animation vers l'avant.
• inverse: Ce paramètre joue l'animation dans le sens inverse.
• alterner: Ce paramètre joue d'abord l'animation dans le sens avant, puis dans le sens inverse.
• Alternate-Reverse: Ce paramètre joue d'abord l'animation dans le sens inverse puis la direction avant.

Exemple
L'exemple ci-dessous démontre le paramètre alternatif de la propriété d'animation-direction.

Html

Bonjour le monde

Nous avons créé une rubrique.

CSS

H1
couleur marron;
Position: relative;
nom d'animation: animation;
Durée d'animation: 3S;
Animation-iteration-Count: Infinite;
Direction d'animation: alternative-reverse;

@KeyFrames Animation
de gauche: 0px; couleur marron;
à gauche: 100px; Couleur jaune;

Le code ci-dessus indique que l'en-tête se déplacera infiniment pendant 3 secondes de 0px à 100px de la gauche dans un changement de mode alternatif entre les couleurs marron et jaune.

Sortir

La propriété d'animation-direction a été mise en œuvre avec succès.

mode d'animation

Cette propriété définit le style d'un élément au moment où l'animation ne joue pas. Cela signifie quel style l'élément aura soit avant le début de l'animation, une fois qu'il a terminé, soit les deux.

Syntaxe

Mode de remplissage d'animation: Aucun | Formeaux | en arrière | Les deux | Héritage | initial;

Tous les paramètres sont expliqués ci-dessous.

• aucun: Il s'agit d'un paramètre par défaut qui donne un style à l'élément avant ou après l'animation se produit.
• Avances: Ce paramètre maintient le style d'un élément défini par la dernière image clé.
• en arrière: Ce paramètre maintient le style d'un élément défini par la première image clé et conserve ce style pendant le temps de retard de l'animation.
• les deux: Ce paramètre bascule entre les avantages et les paramètres vers l'arrière.

Exemple
Voyons comment fonctionne le paramètre Forward en suivant l'exemple ci-dessous.

Html

Nous avons simplement créé un conteneur div.

CSS

div
Largeur: 100px;
hauteur: 100px;
Color en arrière-plan: marron;
Position: relative;
nom d'animation: animation;
Durée d'animation: 3S;
Animation-Filt-mode: Forwards;

@KeyFrames Animation
de gauche: 0px;
à gauche: 100px; Color en arrière-plan: jaune;

Dans le code ci-dessus, nous avons défini la propriété d'animation-remplissage en mode à paramètre Faire, par conséquent, le conteneur div conservera le style spécifié dans la dernière image clé lorsque l'animation est arrêtée et ne jouant pas.

Sortir

Le récipient Div a une couleur de fond jaune lorsque l'animation est arrêtée et ne pas jouer.

Animation-play-State

Cette propriété définit si l'animation s'exécute ou s'arrête.

Syntaxe

Animation-Play-State: Running | pause | Héritage | initial;

Le en cours Le paramètre est une valeur par défaut qui spécifie que l'animation s'exécute, en attendant interrompu Le paramètre spécifie que l'animation est interrompue.

Exemple
Supposons que vous souhaitiez une pause d'animation en utilisant la propriété d'animation-play-State. Voici comment tu fais.

CSS

div
nom d'animation: animation;
Durée d'animation: 3S;
Animation-Play-State: USUSE;

@KeyFrames Animation
de gauche: 0px;
à gauche: 100px;

Le code ci-dessus spécifie que l'animation sera interrompue.

Sortir

L'animation a été arrêtée avec succès.

animation

Cette propriété est une propriété scoris pour toutes les propriétés ci-dessus.

Syntaxe

animation: ;

Exemple
Considérez l'exemple ci-dessous pour comprendre la propriété d'animation.

CSS

div
Animation: Animation 3s Infinite Alternate;

@KeyFrames Animation
de gauche: 0px; Color en arrière-plan: brun;
à gauche: 200px; Color en arrière-plan: jaune;

Nous spécifions que l'animation jouera infiniment pendant 3 secondes de manière alternative.

Sortir

La propriété d'animation fonctionne correctement.

Conclusion

Les animations sont appelées un changement progressif dans le style d'un élément. CSS fournit diverses propriétés d'animation qui sont les suivantes: nom d'animation, durée d'animation, délayage d'animation, animation-timing-fonction, comptoir d'animation-itération, réalisation d'animation, mode d'animation, animation-play-State, et animation. Toutes ces propriétés sont utilisées pour spécifier le comportement de l'effet d'animation appliqué sur divers éléments HTML. Dans ce guide, toutes ces propriétés sont expliquées à l'aide d'exemples pertinents.