Comment configurer les images clés de l'animation CSS

Le langage HTML fournit la structure de la page Web, et CSS fournit la conception et la mise en forme de cette application. Cette combinaison vous permet également d'ajouter une animation, car les éléments animés semblent plus attrayants par rapport aux éléments statiques. Il permet également à un élément de changer son style progressivement.

Cet article guidera comment nous pouvons appliquer l'animation aux éléments. Alors, commençons!

Que sont les images clés de l'animation CSS?

Pour faire l'animation, nous devons lier l'animation à l'élément HTML. À cette fin, utilisez le mot-clé "@keyframes»Suivi du nom de l'animation. Ce composant spécifie le début et la fin de l'animation.

Comment configurer les images clés de l'animation CSS?

Pour configurer des images clés d'animation dans CSS, nous passerons par deux exemples.

Exemple 1

Pour configurer des images clés d'animation dans CSS, effectuez les étapes suivantes:

• • Ajouter un nom de classe «div".
  • À l'intérieur du div, ajoutez un autre div avec le nom de classe "img-peng".
  • À l'intérieur de ce div img-peng, ajoutez pour placer l'image. Cette balise a trois attributs, le «SRC«Attribut pour fournir le chemin d'image,«alt"Est le texte alternatif qui est ajouté si l'image n'est pas affichée, et le"largeur»Attribut pour fournir la largeur de l'image.

Html

CSS

.Div principal
Largeur: 90%;
hauteur: 90px;
Color en arrière-plan: RVB (67, 66, 87);
marge: 20px automatique;
rembourrage: 10px;

Dans CSS, le «.div"Est ajouté pour accéder à la classe div. Les propriétés qui y sont appliquées sont expliquées ci-dessous:

• • "largeur»La valeur de la propriété définit la largeur de la div.
  • "hauteur”La propriété est utilisée pour définir la hauteur de la div.
  • "Couleur de l'arrière plan»La propriété applique de la couleur à l'arrière-plan de l'élément.
  • "marge"Est défini comme"20px automatique», Qui indique l'espace en haut et en bas, et auto signifie un espace égal de gauche et de droite.
  • "rembourrage»La valeur de la propriété est attribuée comme 10px, ce qui applique un espace autour du contenu de l'élément.

Classe IMG-peng Style

.img-peng
Largeur: 50px;
hauteur: 100px;
Position: relative;
Animation: Shake;
Durée d'animation: 2S;
Function d'animation: 2S;
Animation-iteration-Count: Infinite;

Le ".img-peng"Est utilisé pour accéder à la classe Div, mentionné dans le fichier HTML ci-dessus. Cet élément div est stylé avec des propriétés discutées ci-dessous:

• • "largeur»La valeur de la propriété est utilisée pour définir la largeur de l'élément.
  • "hauteur»La valeur de la propriété est utilisée pour définir la hauteur de l'élément.
  • "position"La propriété se voit attribuer la valeur"relatif», Ce qui signifie qu'il sera positionné par rapport à sa position normale.
  • "animation"Le nom est donné comme"secouer". Cependant, vous pouvez nommer l'animation en fonction de l'exigence.
  • "durée d'animation»Représente la durée de l'animation, qui est de 2 secondes.
  • "animation-timing-fonction”Se voit attribuer une valeur de 2S, ce qui signifie en 2 secondes, l'animation est terminée.
  • "compte d'animation-itération"Est défini comme infini, ce qui signifie que cette animation se produira en temps infini.

Définir @keyframes avec et depuis et depuis les mots clés

@keyframes shake
depuis
en haut: 50px;

pour
marge-fond: 200px;

La description des images clés d'animation définies sur l'image est répertoriée ci-dessous:

• • "@keyframes shake”Se réfère au nom de l'animation Shake suivi du mot-clé @keyframes. Dans cette règle, le comportement de l'animation est spécifié.
  • À l'intérieur de ses supports bouclés, le «depuis" et "pour»Les mots clés spécifient différents intervalles pour définir le comportement d'animation.
  • Le "haut”La propriété se voit attribuer la valeur de 50px, ce qui signifie que l'animation commence à partir de 50px en haut de l'écran et se poursuit jusqu'au 200px en bas.

En conséquence, vous verrez la sortie suivante:

Maintenant, laissez l'animation se comporter différemment à différents intervalles. Pour ce faire, utilisez les pourcentages d'animation dans les @keyframes.

Spécifiez @KeyFrames avec pourcentages

@keyframes shake
0%
Gauche: -50px;

25%
Gauche: 50px;

50%
gauche: -25px;

75%
Gauche: 25px;

100%
Gauche: 10px;

Ainsi, la description de l'extrait de code ci-dessus est mentionnée ici:

• • Les valeurs de pourcentage de 0%, 25%, 50%, 75% et 100% représentent l'animation à différents intervalles.
  • De plus, à 0%, l'espace à gauche de l'image sera «-50px". À 25%, l'espace à gauche sera «50px". À 50%, l'espace à gauche sera «-25px". À 75%, l'espace gauche sera «25px», Et à la fin de l'animation (100%), l'espace de gauche sera«10px".

Le code ci-dessus affiche l'animation suivante:

Prenons un autre exemple pour voir comment nous pouvons définir des animations sur les images.

Exemple 2

Dans HTML, ajoutez un nom de classe "page d'accueil". À l'intérieur de cet élément, placez deux autres balises div avec des classes "nuage1" et "cloud2", respectivement.

Html

CSS

corps
marge: 0;
rembourrage: 0;

Dans CSS, nous attribuerons les propriétés CSS suivantes à l'élément corporel:

• • "marge»La propriété comme 0 ne spécifie aucun espace autour de l'élément.
  • "rembourrage»La propriété avec la valeur 0 ne spécifie aucun espace autour du contenu de l'élément.

Style Div de la page principale

.page d'accueil
Image d'arrière-plan: URL (/ images / loup-nuit.png);
République de fond: sans répétition;
taille arrière: couverture;
Hauteur: 100VH;
Position: relative;
débordement caché;

Ici:

• • ".page d'accueil"Est utilisé pour accéder à la classe div.
  • "image de fond"La propriété se voit attribuer la valeur"URL (/ images / loup-nuit.png)«Où les images sont le dossier qui contient l'image de loup-nuit.PNG.
  • "Répétition du fond"La propriété se voit attribuer la valeur"sans répétition, ce qui signifie que l'image sera affichée une fois.
  • "taille de l'arrière-plan"Est défini comme un"couverture"Pour remplir l'intégralité de l'élément div.
  • "hauteur"Est 100 VH, ce qui représente 100% de la hauteur de la fenêtre.
  • "position"Comme relatif définit la position de l'image par rapport à son emplacement actuel.
  • "débordement«La valeur de la propriété est définie comme cachée pour masquer la partie de l'image qui est trop grande pour s'intégrer dans le conteneur.

Classe de cloud1 de style

.cloud1
Image d'arrière-plan: URL (/ images / cloud.png);
taille arrière: contenir;
République de fond: sans répétition;
Position: absolue;
En haut: 100px;
Largeur: 500px;
hauteur: 300px;
Animation: cloudanimation1;
Durée d'animation: 70s;
Animation-iteration-Count: Infinite;

Le DIV Class Cloud1 est appliqué avec les propriétés expliquées suivantes:

• • ".nuage1”Est ​​utilisé pour accéder à la classe DIV Cloud1.
  • "image de fond»La propriété est définie comme URL (/ images / cloud.png), où les images sont le dossier contenant le nuage d'image.PNG.
  • "taille de l'arrière-plan"Avec la valeur"contenir»Assure la visibilité de l'image.
  • "Répétition du fond»Propriété avec la valeur définie comme«sans répétition»Affiche l'image comme non répétée.
  • "position"Comme positionne absolue, l'image par rapport à l'élément de son parent.
  • "haut»La propriété définit l'image à 100px du haut.
  • "largeur»La propriété est utilisée pour régler la largeur de l'élément div sur 500px.
  • "hauteur»La propriété est utilisée pour régler la hauteur de l'élément div à 300px.
  • "animation”Se voit attribuer le nom Cloudanimation1.
  • "durée d'animation»Représente la durée de l'animation, qui est de 70 secondes.
  • "compte d'animation-itération"On attribue la valeur infinie, ce qui iratera les temps infinis d'animation.

Jusqu'à présent, nous avons appliqué les propriétés CSS à la classe principale de la classe Div et à Cloud1. Maintenant, dans la section suivante, nous allons styliser la prochaine classe div nommée Cloud2.

Style Cloud2 Classe

.cloud2
Image d'arrière-plan: URL (/ images / cloud.png);
taille arrière: contenir;
République de fond: sans répétition;
Position: absolue;
en haut: 50px;
Largeur: 200px;
hauteur: 300px;
Animation: cloudanimation2;
Durée d'animation: 15s;
Animation-iteration-Count: Infinite;

Le DIV Class Cloud2 est appliqué avec les propriétés qui sont expliquées ci-dessous:

• • ".cloud2”Est ​​utilisé pour accéder à la classe Cloud2.
  • "image de fond»La propriété est définie comme URL (/ images / cloud.png), où l'image est un dossier qui contient le nuage d'image.PNG.
  • "taille de l'arrière-plan”Contient une valeur s'assure que la visibilité de l'image.
  • "Répétition du fond”La propriété avec la valeur définie en tant que non-répétition affiche l'image en tant que non-répétition.
  • "position"Comme positionne absolue, l'image par rapport à l'élément de son parent.
  • "haut»La propriété définit l'image à 100px du haut.
  • "largeur»La propriété est utilisée pour définir la largeur de l'élément div.
  • "hauteur»La propriété est utilisée pour définir la hauteur de l'élément div.
  • "animation”Se voit attribuer le nom Cloudanimation2.
  • "durée d'animation»Représente la durée de l'animation.
  • "compte d'animation-itération"On attribue la valeur infinie, ce qui iratera les temps infinis d'animation.

Spécifiez @KeyFrames pour CloudAnimation1

@keyframes cloudanimation1
pour
gauche: 0px;

depuis
Gauche: 100%;

Le Cloud1 Div est lié à l'animation décrite ci-dessous:

• • "@keyframes cloudanimation1"Le nom de l'animation Cloudanimation1 est suivi par le mot-clé @keyframes qui est utilisé pour spécifier la transition.
  • Le mot-clé @keyframes spécifie comment l'animation se fait du début à la fin sur les images du cloud.
  • Le "pour" et "depuis»Les mots clés spécifient que le cloud1 passera de 100% au 0px de l'écran.

Spécifiez @KeyFrames pour CloudAnimation2

@keyframes cloudanimation2
0%
Gauche: 0%;

100%
Gauche: 100%;

Le DIV Class Cloud2 est associé à l'animation qui est expliquée ci-dessous:

• • "@keyframes cloudanimation2»Représente le nom d'animation Cloudanimation2 suivi par le mot clé @keyframes qui est utilisé pour spécifier l'animation.
  • Le "0%" et "100%”Représente le début et la fin de l'animation.
  • À 0% de l'animation, le nuage serait à gauche avec la valeur définie à 0%, et elle passera progressivement à 100% de la largeur.

Sortir

C'est super! Nous avons discuté de la façon dont nous pouvons spécifier l'animation aux éléments en utilisant le mot-clé @keyframes avec succès.

Conclusion

CSS nous permet d'appliquer des styles aux éléments HTML. L'animation dans CSS effectue des transitions d'un style à un autre. Il se compose de deux composants, des styles d'animation et des images clés. Les styles d'animation représentent différentes propriétés telles que leur nom, la durée d'animation, le nombre d'animation-itération et plus encore. Tandis que le composant de l'image clé définit le début et la fin de l'animation. Ce guide a expliqué comment configurer des images clés d'animation avec des exemples.