Comment faire tourner l'animation dans CSS

Sur le Web, l'animation joue un rôle clé pour attirer les utilisateurs. Un utilisateur est plus susceptible d'avoir un intérêt pour un site Web animé que statique. Avec l'utilisation du CSS "animation»Propriété, nous pouvons animer n'importe quel élément. Cette propriété nous permet de rendre le site Web plus attrayant et élégant. Il change progressivement les styles d'éléments.

Dans ce manuel, nous allons en apprendre davantage sur les animations rotatives dans CSS.

Comment faire tourner l'animation dans CSS?

L'animation rotative permet à un élément de changer son apparence pour une période centrale. Pour l'animation rotative, le «animation»La propriété de CSS est utilisée. Nous pouvons appliquer cette propriété dans n'importe quel élément de l'image de type HTML, de SVG, de texte et bien d'autres.

Maintenant, nous discuterons des points suivants:

• • propriété d'animation
  • Syntaxe des biens d'animation
  • Comment effectuer une animation rotative à l'aide de CSS?

Comment utiliser la propriété «animation» dans CSS?

Le "animation»La propriété permet de changer le style d'élément de l'un à l'autre. Pour cela, spécifiez le nom de l'animation, la vitesse, le nombre d'animation et la direction de rotation selon la syntaxe suivante.

Syntaxe

Animation: Animation-Name Speed ​​itération-Count-Count Direction;

• • nom d'animation: Il représente le nom d'une animation (intégrée ou personnalisée (en utilisant des images clés)).
  • vitesse: Il est utilisé pour ralentir et accélérer l'animation. Par exemple, "2s»(Pendant deux secondes).
  • Count d'itération: Il désigne combien de fois vous voulez que votre animation continue.
  • direction: Il spécifie comment une animation va jouer, comme l'avant, l'arrière ou alternativement.

Après avoir compris la syntaxe de base de la propriété d'animation, passons dans le travail pratique et comprenons comment créer une animation rotative à l'aide de CSS.

Exemple: objet HTML d'image rotative dans CSS

Dans HTML, écrivez le code de l'élément que vous souhaitez tourner. Ici, nous allons tourner une icône SVG:

Appliquons l'animation de rotation dans CSS. Ici le ".tourner”Est ​​utilisé pour accéder à la classe attribuée à l'image sélectionnée à laquelle nous voulons tourner en CSS. Ensuite, nous allons définir la largeur de l'image sur «100px»Et tournez-le en 2 secondes pour un nombre infini de fois dans un motif linéaire. Cependant, vous pouvez modifier la vitesse, le compte d'itération et la direction selon votre choix:

.tourner
Largeur: 100px;
Animation: Rotation 2S Infinite Linear;

Le @keyframes est utilisé pour définir le point de départ et de fin de l'animation (en utilisant "depuis" et "pour" mots clés). De plus, fournissez le nom d'animation «rotation"Suivi par les @keyframes auxquels vous voulez animer. Puisque nous voulons déplacer l'animation circulairement, alors utilisez le «tourner()«Fonction de la propriété Transform dans laquelle nous allons commencer«0 degrés"Et fini à"359 degrés»:

@KeyFrames Rotation
depuis
Transformer: Rotation (0deg);

pour
Transformée: Rotation (359DEG);

Après l'implémentation du code CSS, accédez au fichier HTML et exécutez-le pour obtenir le résultat suivant:

Avec l'utilisation du «animation»Propriété, nous avons réussi à faire pivoter un élément sur une période définie.

Conclusion

Pour créer une animation rotative dans CSS, utilisez la propriété d'animation et définissez la valeur des animations comme la durée, la direction et la vitesse. De plus, la fonction CSS rotate () est utilisée pour faire tourner un élément circulairement dans la propriété de transformation. Cet article a expliqué la propriété d'animation en détail pour faire pivoter une animation pour un nombre infini de fois.