propriété de transition CSS3
Exemples
Survolez un élément div, et changer progressivement la largeur de la table à partir de 100px à 300px ::
div
{
largeur: 100px;
transition: 2s largeur;
-webkit transition: 2s largeur; / * Safari * /
}
div: hover {width: 300px;}
{
largeur: 100px;
transition: 2s largeur;
-webkit transition: 2s largeur; / * Safari * /
}
div: hover {width: 300px;}
Essayez »
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 | 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
la propriété de transition est une propriété raccourcie comporte quatre attributs: transition-propriété, transition durée, transition-timing-fonction, et la transition de retard.
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: | tout 0 facilité 0 |
|---|---|
| Héritage: | aucun |
| Version: | CSS3 |
| Syntaxe JavaScript: | objet .style.transition = "2s largeur" |
grammaire
transition:lapropriétéderetard durée timing-function;
| 值 | 描述 |
|---|---|
| transition-property | 指定CSS属性的name，transition效果 |
| transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
| transition-timing-function | 指定transition效果的转速曲线 |
| transition-delay | 定义transition效果开始的时候 |
