transition

英 [tr?n?z??n] 美 [tr?n?z???n, -?s??-]

propriété

英 [?pr?p?ti] Beauté [?prɑ:p ?rti]

propriété de propriété de transition CSS syntaxe

Role?: L'attribut transition-property spécifie le nom de la propriété CSS qui applique l'effet de transition. (L'effet de transition commencera lorsque la propriété CSS spécifiée changera). Astuce?: Les effets de transition se produisent généralement lorsque l'utilisateur fait flotter le pointeur de la souris sur un élément.

Syntaxe?: transition-property: none|all|property;

Description?: none Aucune propriété ne bénéficiera de l'effet de transition. Toutes les propriétés recevront l'effet de transition. Property définit une liste de noms de propriétés CSS qui appliquent des effets de transition. La liste est séparée par des virgules.?

Remarque?: Veuillez toujours définir l'attribut transition-duration, sinon la durée sera de 0 et il n'y aura pas d'effet de transition.

propriété de propriété de transition CSS exemple

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:blue;
transition-property: width;
transition-duration: 2s;
-moz-transition-property: width; /* Firefox 4 */
-moz-transition-duration: 2s; /* Firefox 4 */
-webkit-transition-property: width; /* Safari and Chrome */
-webkit-transition-duration: 2s; /* Safari and Chrome */
-o-transition-property: width; /* Opera */
-o-transition-duration: 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>請把鼠標指針移動到藍色的 div 元素上，就可以看到過渡效果。</p>
<p><b>注釋：</b>本例在 Internet Explorer 中無效。</p>
</body>
</html>
Exécuter l'instance ?

Cliquez sur le bouton ??Exécuter l'instance?? pour afficher l'instance en ligne