CSS3 propriété transition-propriété
Exemples
Survolez un élément div, et changer progressivement la largeur de la table:
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
}
div:hover {width:300px;}
Essayez »
Dans le bas de cette page pour plus d'exemples.
support du navigateur
Les chiffres du tableau représentent le premier navigateur pour soutenir le numéro de version de la propriété.
Immédiatement après la -webkit- numérique, -ms- ou -moz- il y a à l'appui du préfixe d'attribut premier numéro de version du navigateur.
属性 | |||||
---|---|---|---|---|---|
transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Définition des attributs et des instructions
attribut transition propriété spécifie l'effet CSS propriété nametransition (va commencer les changements de propriété CSS spécifiées lorsque l'effet de transition).
Astuce: un effet de transition, se produit généralement lorsque l'utilisateur survole un élément.
Remarque: Toujours spécifier la propriété de transition durée, sinon la durée de 0, la transition n'a pas d' effet.
Par défaut: | tous |
---|---|
Héritage: | aucun |
Version: | CSS3 |
Syntaxe JavaScript: | objet .style.transitionProperty = "width, height" |
grammaire
valeur | description |
---|---|
aucun | Aucun bien obtenir des transitions. |
tous | Toutes les propriétés recevront des effets de transition. |
propriété | Définitions appliquent la propriété CSS liste de nom de l'effet de transition, qui a séparé par des virgules. |
D'autres exemples
Les effets de transition - pour modifier les deux propriétés
Survolez un élément div, modifier la largeur et la hauteur avec des effets de transition en douceur.