manuel de référence CSS

règles CSS @

大全 des attributs CSS

CSS3 transition-timing-function propriété CSS3 transition-duration propriété

CSS3 transition-Méthode d'utilisation et exemple de la propriété property

transition-La propriété CSS spécifie le nom de l'attribut CSS auquel l'effet de transition doit être appliqué.

Le tableau suivant décrit l'utilisation de cette propriété et l'historique des versions, ainsi que la syntaxe d'utilisation de cette propriété dans le script JavaScript.

Valeur par défaut :	all
Applicable à :	Tous les éléments ::before et ::after Pseudo-élément
Héritage :	Non
Animable :	Non.Voir également Animation propriété。
Version :	CSS3nouvelle fonction
JavaScript syntaxe :	object.style.transitionProperty="width,height"

transition-La syntaxe d'utilisation de property

La syntaxe de cette propriété est la suivante :

transition-La syntaxe de l'attribut property:　　[,　, ... ]　|　none　|　all　|　initial　|　inherit
　where　　is the name of a CSS property

Les exemples suivants démontrent comment utiliser transition-property propriété.

Exemple

button　{
　　　　background:　#fd7c2a;
　　　　/*　Pour　Safari　3.0+　*/
　　　　-webkit-transition-property:　background;
　　　　-webkit-transition-duration:　2s;
　　　　
　　　　transition-property:　background;
　　　　transition-duration:　2s;
}
button:hover　{
　　　　background:　#3cc16e;
}

Testez pour voir‹/›

Valeur de la propriété

Le tableau suivant décrit les valeurs de cette propriété.

Valeur	Description
none	Aucune propriété ne recevra l'effet de transition.
all	Toutes les propriétés recevront l'effet de transition. C'est la valeur par défaut.
initial	Réglez cette propriété à sa valeur par défaut.
inherit	Si spécifié, l'élément lié utilise la transition de son élément parent-Valeur de la propriété property.

Compatibilité du navigateur

transition-property propriété compatible avec les navigateurs, les numéros dans le tableau suivant représentent la version minimale du navigateur qui prend en charge cette propriété ; tous les navigateurs populaires prennent en charge cette propriété.

	Firefox 4+ ^-moz-，16 + Google Chrome 4+ ^-webkit-，26 + Internet Explorer 10+ Apple Safari 3.1+ ^-webkit-，6.1+ Opera 10.5+ ^-o-，12.1+

Lisez la suite

Veuillez consulter les tutoriels suivants :CSS3 Transitions。

Propriétés associées :transition，transition-delay，transition-duration，transition-timing-function。

CSS3 transition-timing-function propriété CSS3 transition-duration propriété