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>Copier après la connexion | 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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
