Maison >interface Web >tutoriel CSS >Raccourci de transition avec plusieurs propriétés en CSS ?
Raccourci de transition avec plusieurs propriétés en CSS ?
- WBOYavant
- 2023-09-01 20:21:021019parcourir
Nous pouvons ajouter des transitions aux éléments HTML en utilisant CSS. Avant de commencer ce tutoriel, comprenons d'abord ce que sont les transitions. Fondamentalement, une transition se produit lorsqu'un élément passe d'un état à un autre. Par exemple, nous modifions les dimensions d'un élément lorsque l'utilisateur le survole.
En CSS, nous pouvons ajouter des transitions aux éléments de deux manières. La première consiste à utiliser simultanément les quatre propriétés « transition-property », « transition-duration », « transition-timing-function » et « transition-delay ». La seconde consiste simplement à utiliser la propriété CSS "transition".
La propriété CSS « transition » est un raccourci pour les propriétés CSS suivantes.
Transition-property - Il spécifie la propriété CSS dont nous avons besoin pour appliquer l'effet de transition. Si nous devons appliquer une transformation à toutes les propriétés, nous pouvons utiliser « toutes » comme valeur.
Transition-duration - La durée totale de l'effet de transition en secondes.
Transition-timing-function - Elle détermine comment la transition doit se produire. Des exemples de fonctions de synchronisation de transition sont "liner", "ease-in", "ease-out", "ease-in-out", etc.
Transition-delay - Il s'agit du temps écoulé après le début de l'effet de transition.
Grammaire
Les utilisateurs peuvent utiliser un raccourci de transition avec plusieurs propriétés CSS selon la syntaxe suivante.
element {
transition: Property duration timing-function delay;
}
Dans la syntaxe ci-dessus, la première valeur est la propriété de transformation, la deuxième valeur est la durée de la transformation, la troisième valeur est la fonction de synchronisation et la dernière valeur est le délai de transformation.
Exemple 1
Dans l'exemple ci-dessous, nous avons un élément div de dimensions 200 x 200, et nous avons ajouté un effet de transition qui dure 2 secondes sur la hauteur de l'élément div. Ici, le délai de conversion est de 0,5 seconde et la fonction de synchronisation est « easy-in-out ».
Les utilisateurs peuvent passer la souris sur l'élément div pour observer l'effet de transition. Nous pouvons observer que la hauteur de l’élément div augmente progressivement plutôt qu’immédiatement.
<html>
<head>
<style>
/* adding transition effect on the element */
.element {
width: 500px;
height: 200px;
background-color: red;
color: white;
font-size: 25px;
transition: height 2s ease-in-out 0.5s;
}
.element:hover {
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<h3>Using the <i> transition property </i> of CSS to add transition to the element</h3>
<div class = "element">
This div contains the texts.
<p> Hover over this div and wait to see the changes </p>
</div>
</body>
</html>
Exemple 2
Dans l'exemple ci-dessous, l'élément div a une marge initiale gauche de 2px. Lorsque l'utilisateur survole l'élément div, nous augmentons la marge gauche à 100 px. Nous avons ajouté un effet de transition qui retarde 0,5 seconde et dure 2 secondes sur la propriété CSS margin-left de l'élément div.
Dans la sortie, survolez l'élément div et il se déplacera de 100 pixels vers la droite en 2 secondes.
<html>
<head>
<style>
/* adding transition effect on the element */
.element {
width: 200px;
height: 200px;
background-color: blue;
color: white;
font-size: 25px;
margin-left: 2px;
border-radius: 12px;
transition: margin-left 2s ease-in-out 0.5s;
}
.element:hover {
margin-left: 100px;
}
</style>
</head>
<body>
<h3> Using the <i> transition property </i> of CSS to add transition to the element </h3>
<p> Hover over the below div and wait to see the changes. </p>
<div class = "element">
This div contains the texts.
</div>
</body>
</html>
Exemple 3
Dans l'exemple ci-dessous, nous avons ajouté des effets de transition à plusieurs propriétés CSS. Ici, nous avons ajouté un effet de transition de 2 secondes pour les propriétés CSS « margin-left », « height », « width », « background-color », « color » et « font-size ».
Dans le résultat, les utilisateurs peuvent observer que la transition de toutes les propriétés CSS se fait en douceur. Cependant, nous pouvons utiliser « all » comme valeur de « transition-property » pour ajouter des transitions à toutes les propriétés.
<html>
<head>
<style>
/* adding transition effect on the element */
.element {
width: 200px;
height: 200px;
background-color: blue;
color: white;
font-size: 25px;
margin-left: 2px;
border-radius: 12px;
transition: margin-left 2s, height 2s, width 2s, background-color 2s, color 2s, font-size 2s;
}
.element:hover {
margin-left: 100px;
height: 400px;
width: 400px;
background-color: aqua;
color: black;
font-size: 40px;
}
</style>
</head>
<body>
<h3> Using the <i> transition property </i> of CSS to add transition to the element </h3>
<p> Hover over the bellow div to see the achennges</p>
<div class = "element">
Square div element.
</div>
</body>
</html>
Les utilisateurs ont appris à utiliser la propriété CSS « transition », qui est un raccourci pour plusieurs propriétés CSS liées aux transitions. Ici, nous avons appris à utiliser la propriété CSS « transition » dans les trois exemples ci-dessus. Dans l'exemple précédent, nous avons ajouté des effets de transition à plusieurs propriétés CSS.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!