L'une des innovations de CSS3 est la capacité de créer des transitions et des animations avec des comportements. L'animation CSS3 peut être utilisée dans de nombreuses images clés pour modifier l'apparence et le comportement d'un élément. Une animation établit de nombreux points de transition basés sur des images clés distinctes, tandis que les transitions vous permettent de passer d'un état à un autre.

Tout au long de cet article, nous examinerons:

• Property de transition dans CSS
• Comment utiliser la property de transition dans CSS?

Très bien, commençons!

Qu'est-ce que la property de transition dans CSS?

Le "property de transition»Nous permet de modifier en douceur les valeurs de la propriété en fonction de la durée spécifiée. Il se produit lorsque la propriété CSS change sa valeur de l'une à l'autre sans clignoter. Selon son état, il peut être plané ou actif. Maintenant, passons à la syntaxe de la property transition.

Syntaxe

Il y a deux choses que vous devez spécifier lors de la création d'un effet de transition:

• Ajout d'un effet à une propriété CSS.
• Définir la durée de l'effet.

Suivez la syntaxe suivante pour ajouter un effet de transition à l'aide de la property de transition:

PROPERTÉ DE TRANSITION: VALEUR;

Au lieu de la valeur, ajoutez un effet de la transition que vous souhaitez appliquer.

Suivez la syntaxe dirigée ci-dessous pour ajouter l'effet de durée à l'aide de la propriété de durée de transition:

Durée de transition: valeur;

Selon vos préférences, vous pouvez également ajouter un retard de transition et une fonction de synchronisation.

Voici un exemple dans lequel nous implémentons la transition de diapositive.

Comment utiliser la property de transition dans CSS?

On peut utiliser "property de transition«Sur n'importe quel élément tel que div, cap, bouton et bien d'autres.

En utilisant un exemple, voyons comment fonctionne la propriété de transition.

Exemple: comment glisser à partir de la transition gauche dans CSS?

L'exemple suivant, nous créerons un titre

à l'intérieur de :

Glisser à partir de la transition gauche

Lorsque nous exécutons ce fichier HTML, il affichera le résultat suivant:

Ici, nous pouvons voir qu'une simple rubrique est présentée. Nous allons maintenant passer à la section CSS, où appliquer la propriété de transition au conteneur créé. À cette fin, nous rédigerons le code suivant:

div
Largeur: 150px;
hauteur: 150px;
Contexte: Goldenrod;
Property transition: largeur;
Durée de transition: 1s;

Le bloc de code ci-dessus sert les fonctionnalités suivantes:

largeur et hauteur: La taille de Div est «150px"En largeur et"150px" En hauteur.

arrière-plan: La couleur de la div est définie «dorénrod".

Property de transition: Nous avons réglé la propriété de transition sur la largeur; À travers cela, il glissera à partir de gauche en transition.

Durée de transition: "1»Ou une seconde est la durée de transition. Lorsque nous déplaçons le curseur de la div, en une seconde, il ira à son état d'origine.

Note: Chaque fois que la propriété de largeur CSS change, l'effet de transition commencera.

Maintenant, prenez une nouvelle valeur pour la propriété Largeur qui sera utilisée pour souris sur l'élément DIV. La taille de la propriété de largeur est définie sur «500px". Il glissera de gauche à droite quand un curseur se déplacera sur l'élément, et lorsque vous déplacez la souris hors de l'élément, le style reviendra progressivement à son état d'origine:

Div: Hover
Largeur: 500px;

Après cela, allez dans le fichier HTML et exécutez-le. Il donnera la sortie suivante:

Après avoir appliqué la propriété de transition vers le div, nous pouvons maintenant voir qu'il est actif.

Conclusion

Dans CSS, pour le glissement de la transition gauche, le «property de transition" est utilisé. Vous pouvez définir l'effet de la transition et sa durée en utilisant le «property de transition" et "durée de transition»Propriétés, respectivement. À l'aide d'un exemple, cet article a démontré comment la propriété de transition est utilisée pour glisser de gauche à droite.