Maison > Article > interface Web > Combien de propriétés de transition y a-t-il en CSS3 ?
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!