Transitions dans CSS

Pour rendre votre conception Web attrayante, vous devez ajouter certaines animations à votre contenu. Pour gérer le comportement de ces animations, les transitions CSS sont utilisées. Les transitions sont appelées un changement dans l'état d'un élément en douceur dans une durée spécifiée. Par conséquent, lorsque vous appliquez des effets de transition sur divers éléments CSS, vous devez indiquer la propriété CSS sur laquelle l'effet sera appliqué ainsi que l'heure de l'effet. La spécification de la durée est très importante ou autrement, il n'y aura aucun effet de transition sur l'élément particulier.

Il existe certaines propriétés de transition CSS qui sont utilisées pour ajouter des effets de transition sur divers éléments, nous les avons expliqués en détail ci-dessous.

Propriétés de transition CSS

CSS fournit diverses propriétés de transition qui sont les suivantes.

1. property de transition
2. durée de transition
3. retarder la transition
4. transition-timering-fonction
5. transition

Toutes les propriétés susmentionnées sont expliquées ci-dessous.

property de transition

Cette propriété est utilisée pour spécifier diverses propriétés CSS auxquelles l'effet de transition doit être appliqué.

Syntaxe

Property de transition: aucun | Tout | propriété | Héritage | initial;

Toute valeur est une valeur par défaut qui applique l'effet de transition à toutes les propriétés spécifiées, tandis que la valeur de la propriété spécifie le nom de propriété sur lequel l'effet sera appliqué.

Exemple
Supposons que vous souhaitiez modifier la largeur et la hauteur d'un conteneur Div en utilisant la propriété de transition.

Html

Amenez la souris sur moi

Nous définissons simplement un conteneur div.

CSS

div
Largeur: 100px;
hauteur: 90px;
Contexte: rose;
Property de transition: largeur, hauteur;
Durée de transition: 2S;

Div: Hover
Largeur: 250px;
hauteur: 250px;

Nous définissons la largeur d'origine du div à 100px et la hauteur à 90px puis nous appliquons un effet de transition sur la largeur et la hauteur de la div pendant 2 secondes. La spécification de la durée est un must sinon la transition ne s'appliquera pas. De plus, l'effet de transition se produira lorsque l'utilisateur apportera la souris sur le conteneur div.

Sortir

Un effet de transition a été mis en œuvre avec succès sur le conteneur div.

durée de transition

Cette propriété spécifie la durée de l'effet de transition. Chaque propriété peut recevoir une durée unique ou vous pouvez attribuer différentes durées à diverses propriétés CSS.

Syntaxe

Durée: temps | Héritage | initial;

Le paramètre de temps spécifie la durée de l'effet de transition.

Exemple
Supposons que vous souhaitiez augmenter la taille de la police et le poids d'un paragraphe lorsqu'un curseur de souris est amené dessus.

Html

Amenez la souris sur moi

Nous avons défini notre paragraphe.

CSS

p
taille de police: 20px;
Property transition: taille de police;
Durée de transition: 3S;

P: Hover
taille de police: 50px;

Le code ci-dessus spécifie que lorsque le curseur de la souris est amené sur le paragraphe, la taille de la police du paragraphe changera et cet effet se produira pendant 3 secondes.

Sortir

La propriété de durée de transition fonctionne correctement.

retarder la transition

Cette propriété spécifie le retard entre un changement dans une propriété et le début de l'effet de transition.

Syntaxe

Durée: temps | Héritage | initial;

Le paramètre de temps spécifie la durée d'attente avant le début de l'effet de transition.

Exemple
Supposons que vous souhaitiez appliquer un effet de transition sur un élément div après un délai de 2 secondes, suivez l'exemple ci-dessous.

Html

Amenez la souris sur moi

Dans le code ci-dessus, nous avons simplement créé un conteneur div.

CSS

div
hauteur: 100px;
Largeur: 100px;
Color en arrière-plan: rose;
Properité de transition: hauteur;
Durée de transition: 3S;
TRANSITION DU TRANSITION: 2S;

Div: Hover
hauteur: 200px;

Selon le morceau de code ci-dessus, l'effet de transition se produira après le retard de 2 secondes.

Sortir

Ceci est un effet de transition avec un retard de 2 secondes.

transition-timering-fonction

Cette propriété est utilisée pour définir la courbe d'accélération de l'effet de transition.

Syntaxe

Transition-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'effet de transition se produit de manière lente à casser.
• linéaire: L'effet de transition aura la même vitesse du début à la fin.
• facilité dans: L'effet de transition aura un début lent.
• Facturation: L'effet de transition aura une fin lente.
• Faisition en dehors: L'effet de transition aura un début lent ainsi qu'une fin lente.
• cubic-bezier (n, n, n, n): Les valeurs de l'effet de transition seront fixées.

Exemple
Considérez l'exemple ci-dessous.

Html

Amenez la souris sur moi

Un conteneur div a été simplement créé.

CSS

div
hauteur: 100px;
Largeur: 100px;
Color en arrière-plan: rose;
Property transition: largeur;
Durée de transition: 2S;
Transition-Timing-Function: linéaire;

Div: Hover
Largeur: 200px;

Selon le code ci-dessus, la largeur du conteneur div changera de manière linéaire, ce qui signifie que l'effet de transition aura la même vitesse du début à la fin.

Sortir

L'effet de transition se produit de manière linéaire.

transition

Cette propriété est une propriété raccourci qui est utilisée pour définir des valeurs sur toutes les propriétés de transition ci-dessus.

Syntaxe

transition: (propriété) (durée) (timing-fonction) (retard);

Exemple
L'exemple ci-dessous démontre le fonctionnement de la propriété de transition.

CSS

div
hauteur: 100px;
Largeur: 100px;
Color en arrière-plan: LightEagreen;
transition: largeur 0.5s linéaire 1s;

Div: Hover
Largeur: 200px;

En utilisant la propriété de transition, nous appliquons un effet de transition sur la largeur pour 0.5 secondes de manière linéaire avec un retard de 1 seconde.

Sortir

La propriété de transition fonctionne correctement.

Conclusion

Les transitions sont appelées un changement dans l'état d'un élément en douceur dans une durée spécifiée. CSS fournit diverses propriétés de transition qui sont les suivantes: property transition, durée de transition, retard de transition, fonction de transition et transition. Toutes ces propriétés sont utilisées pour spécifier le comportement de l'effet de transition appliqué sur divers éléments HTML. Dans ce guide, toutes ces propriétés sont expliquées à l'aide d'exemples pertinents.