Maison > Article > interface Web > Combien de propriétés de transition y a-t-il en CSS3 ?
Combien de propriétés de transition y a-t-il en CSS3 ?
- 青灯夜游original
- 2021-12-14 17:20:162093parcourir
Il y en a 5 : 1. attribut de propriété de transition ; 2. attribut de durée de transition ; 3. attribut de fonction de synchronisation de transition ; 4. attribut de délai de transition ;
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
La transition css3 nous permet de passer d'une valeur d'attribut à une autre dans un temps limité.
Il y a 5 attributs de transition en CSS3 :
| Attribut | Description | CSS |
|---|---|---|
| transition | Attribut d'abréviation, utilisé pour définir quatre attributs de transition dans un seul attribut. | 3 |
| transition-property | Spécifie le nom de la propriété CSS qui applique la transition. | 3 |
| transition-duration | Définissez la durée de l'effet de transition. La valeur par défaut est 0. | 3 |
| transition-timing-function | spécifie la courbe temporelle de l'effet de transition. La valeur par défaut est « facilité ». | 3 |
| transition-delay | Spécifie quand l'effet de transition commence. La valeur par défaut est 0. | 3 Il y a tellement de codes de transition dans div{}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: red;
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 2s;
}
div:hover {
width: 200px;
}
</style>
</head>
<body>
<div></div>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>
</body>
</html> | En fait, il vous suffit d'utiliser l'attribut de transition abrégé et d'utiliser deux lignes de code pour l'obtenir :
)
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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Qu'est-ce que l'attribut composite CSS3Article suivant：Qu'est-ce que l'attribut composite CSS3