Comment avoir plusieurs transitions CSS sur un élément

De nombreuses plateformes en ligne nécessitent des animations sur certaines pages Web pour rendre l'application plus accrocheuse. À cette fin, les développeurs utilisent les propriétés CSS lors de la conception des interfaces frontales. Plus précisément, les transitions CSS signifient l'application d'animations sur un élément HTML via les propriétés CSS de telle manière qu'il applique automatiquement les propriétés l'une après l'autre.

Cet article discutera de la méthode pour appliquer les propriétés CSS pour avoir plusieurs transitions sur un élément HTML.

Comment appliquer plusieurs transitions CSS sur un élément?

Tout ce qu'il nécessite, c'est d'abord créer les éléments de HTML sur lesquels les transitions doivent être appliquées, puis ajouter l'ID CSS ou les sélecteurs de classe dans l'élément de style pour se référer aux éléments HTML.

Exemple

Créons un élément de conteneur Div dans le corps du code HTML, puis appliquons les propriétés CSS dessus pour la rendre animée:

Planer pour voir les transitions

Bonjour utilisateur!!!

Dans l'extrait de code ci-dessus:

• • Un "

    "La tête est ajoutée avec le CSS en ligne"marge»Propriété définie sur«1 rem"Et le titre dit"Planer pour voir les transitions".

  • Après cela, un ««L'élément de conteneur est ajouté avec la classe déclarée«Ma classe".
  • Le ""L'élément de conteneur a le texte"Bonjour utilisateur!!!" à l'intérieur. Les transitions CSS seront appliquées à cet élément div.

L'élément de style CSS devrait avoir toutes les propriétés nécessaires qui rendent le div animé:

.Ma classe
taille de police: 3rem;
marge: 2rem;
Justification-contenu: centre;
Affichage: flex;
Border: 10px pourpre solide;
Largeur: 20rem;
hauteur: 9rem;
Transition: Couleur 1s Emplacable-out, padding-top 1s Ease-Out-Out,
Padding-Bottom 1s Facit-out, Fonction de la taille de la police 3S;

.myClass: Hover
Couleur bleue;
Border: 10px Orange solide;
Tableau de rembourrage: 100px;
Padding-Bottom: 40px;
taille de police: 1.8rem;

Dans l'élément de style CSS ci-dessus:

• • Un sélecteur de classe est ajouté qui fait référence au «Ma classe”Élément de conteneur div. À l'intérieur, diverses propriétés CSS sont définies pour l'élément de conteneur DIV.
  • Le "taille de police»La propriété définit la taille du texte écrit dans le conteneur div à«3rem".
  • Le "marge"Une propriété est ajoutée pour donner un espacement de"2rem"Après le texte ou le titre.
  • Le "justifier»La propriété aligne le texte du conteneur div au centre du conteneur div.
  • Le "affichage«La propriété a été ajoutée pour aligner correctement le contenu dans l'élément div.
  • Le "frontière«Une propriété est ajoutée pour fixer le poids de la bordure du conteneur div comme«10px«Et il définit la couleur de la bordure comme«violet".
  • Le "largeur»La propriété définit la longueur verticale de l'élément div comme«20rem".
  • De même, le «hauteur»La propriété définit la longueur horizontale de l'élément div comme«9rem".
  • Le "transition«Une propriété est ajoutée pour définir l'heure à laquelle les transitions doivent être appliquées. Pour "couleur","padding" et "rembourrage», Il a été défini comme«1 seconde" et pour "taille de police», Il a été défini comme«3 secondes".
  • Après cela, la pseudo-classe «:flotter"Est ajouté avec le sélecteur de classe CSS".Ma classe«Pour définir les propriétés CSS à implémenter tandis que l'utilisateur plane sur l'élément créé via«Ma classe".
  • Le "couleur«La propriété est définie comme«bleu"Pour que lorsque l'utilisateur plane sur l'élément, il modifie immédiatement la couleur du texte en bleu.
  • Ensuite, le «frontière«La propriété a été définie qui modifie la taille de la bordure en«10px«Alors que le plan en planant et la couleur des frontières ont été définis comme«orange".
  • Le "padding" et "rembourrage»Des propriétés ont été ajoutées pour définir respectivement l'espacement entre le contenu et les bordures du haut et du bas.
  • Le "taille de police" est défini comme "8rem"En planant.

Les résultats des transitions CSS appliquées ci-dessus seront les suivants:

Cela résume la méthode pour appliquer plusieurs transitions CSS sur un élément HTML.

Conclusion

Les transitions CSS sont appliquées aux éléments HTML pour les rendre animés. Tout ce qu'il faut pour appliquer les transitions CSS est d'ajouter l'ID ou le sélecteur de classe dans l'élément de style CSS faisant référence à l'élément HTML sur lequel les transitions doivent être appliquées, puis en ajoutant toutes les propriétés nécessaires comme la couleur, la police, les frontières, le rembourrage avant ainsi qu'après la transition. Cet article a guidé sur l'application de plusieurs transitions CSS sur un élément HTML.