Comment lire plusieurs animations CSS en même temps ?

Cet article présente une démonstration pratique pour lire/ajouter plusieurs animations CSS en même temps.

Comment lire plusieurs animations CSS en même temps ?

En appliquant plusieurs animations CSS en même temps, les développeurs peuvent facilement créer des interfaces plus attrayantes. Pour lire plusieurs animations CSS en même temps, attribuez à chacune un nom unique et appliquez ces noms aux mêmes composants ou à des composants distincts de la page.

Suivez la procédure ci-dessous pour lire/ajouter plusieurs animations en même temps.

Étape 1 : Création de la structure

Tout d'abord, créez un élément HTML dans lequel les animations seront appliquées dans les étapes suivantes. Par exemple, l'image va être insérée :

Dans l'extrait de code ci-dessus :

• Tout d'abord, le chemin de l'image est défini sur ' src ' attribut.
• Ensuite, la valeur de ' 100px » est fourni aux propriétés CSS « ​​width » et « height ».
• Définissez également la valeur de ' animer ' au ' classe ' attribut.

Étape 2 : Configurer les animations

Le ' images clés ” sont utilisés pour créer des animations personnalisées en fonction des besoins de la page Web. Par exemple, deux animations sont créées dans l'extrait de code ci-dessous :

Dans l'extrait de code ci-dessus :

• Premièrement la ' @-webkit-images clés « Le mécanisme est utilisé pour mettre en place » rotation ' et ' tourner ” des animations nommées.
• Ensuite, utilisez le ' transformer ” propriété qui a une valeur de “ tourner() ' dans le ' rotation ” corps d'animation. Cette fonction fait pivoter l'élément à un angle de ' 180 degrés ”.
• Après cela, définissez l'animation qui agrandit ou étend l'élément d'origine d'un facteur de ' 1 ' dans les deux ' X ' et ' ET ' axe dans le ' escalader ” corps d'animation.

Étape 3 : Appliquer l'animation sur les éléments HTML

Dans la partie CSS, sélectionnez la classe ' animer » qui est attribué au « ” et fournissez les propriétés CSS suivantes :

Description des propriétés utilisées dans le bloc de code ci-dessus :

• Tout d'abord, définissez la valeur de ' absolu « au CSS » position ' propriété. Il aligne le « image ” élément selon l'animation.
• Ensuite, fournissez les valeurs de ' 60% ”, “ 110px ' et ' 110px « au CSS » gauche ”, “ largeur ' et ' hauteur ' propriétés. Ces propriétés sont utilisées pour définir la position et la taille d'un élément.
• Après cela, définissez la valeur de ' échelle 3s infinie linéaire ' au ' -webkit-animation ” Propriété CSS.
• Et le ' 3s ' est la durée de cette animation, le ' infini ' est la durée de l'animation, et le ' linéaire » est la direction de l'animation.
• À la fin, fournissez les valeurs de ' spin 2s infini linéaire « au CSS » -webkit-animation ' propriété. Cette propriété ajoute la deuxième animation nommée ' rotation ' sur le ' image ' élément.

Après la compilation du bloc de code ci-dessus, l'animation ressemble à ceci :

Le gif ci-dessus illustre que seulement ' rotation ” l'animation joue sur l'élément ciblé.

Étape 4 : Lecture de plusieurs animations sur des éléments HTML

Comme dans l'étape ci-dessus, une seule animation a été appliquée à l'élément. En effet, plusieurs valeurs ont été attribuées au même ' -webkit-animation ' propriété.

Pour résoudre ce problème, encapsulez l'élément cible avec un autre élément HTML. Comme le ' div ' est déjà utilisé comme wrapper dans la première étape, sélectionnez son ' portée ” et mettez à jour le code comme:

Dans le code ci-dessus :

• Au début, le « animer ' la classe reste la même et seule la seconde animation en est retirée qui est placée dans la ' portée ' classe.
• Après cela, réglez la position en utilisant le ' position ' et ' haut ' propriétés.

Après l'exécution de l'extrait de code ci-dessus, la page Web apparaît maintenant comme ceci :

La sortie montre que les deux animations ont été appliquées à l'élément HTML sélectionné en même temps.

Conclusion

Pour appliquer plusieurs propriétés CSS, enveloppez l'élément avec des éléments HTML et appliquez-leur des animations afin que chaque élément HTML contienne une seule animation. Comme la propriété enfant hérite de l'animation appliquée sur l'élément HTML parent, plusieurs animations sont appliquées sans provoquer d'erreurs ou d'ambiguïté pour le compilateur. C'est la procédure pour jouer/ajouter plus d'une animation CSS en même temps.