manuel de référence CSS

règle @RULES

大全 des propriétés CSS

CSS unicode-Attribut bidi CSS3 transition-Attribut property

CSS3 transition-timing-Méthode d'utilisation et exemples de l'attribut fonction

transition-timing-La fonction attribut CSS spécifie la vitesse de transition de l'effet. Cet attribut permet à un effet de transition de changer la vitesse de sa durée.

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

Valeur par défaut :	ease
Appliqué à :	Tous les éléments ::before et ::after Élément pseudo
Héritage :	Aucun
Animable :	Non.Voir également Attributs d'animation.
Version :	CSS3nouvelle fonctionnalité
Syntaxe JavaScript :	objet.style.transitionTimingFunction="ease-in"

transition-timing-L'utilisation de la syntaxe de la fonction

La syntaxe de cet attribut est la suivante :

transition-timing-function: linear　|　ease　|　ease-in　|　ease-out　|　ease-in-out　|　cubic-bezier(n,n,n,n)　|　initial　|　inherit

Les exemples suivants montrent comment utiliser transition-timing-Attribut function.

Exemple

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

Vérifiez ici‹/›

Valeur de l'attribut

Le tableau suivant décrit les valeurs de cet attribut.

Valeur	Description
linear	Spécifiez une transition à une vitesse constante de l'état initial à l'état final.
ease	Similaire à 'ease-in-out', bien que l'accélération au début soit plus rapide et qu'elle commence à ralentir à proximité du milieu.
ease-in	Spécifiez que la transition commence lentement, puis s'accélère progressivement jusqu'à atteindre l'état final et s'arrête brusquement.
ease-out	Spécifiez que la transition commence rapidement, puis ralentit progressivement lorsqu'elle approche de son état final.
ease-in-out	Spécifiez que la transition commence lentement, puis s'accélère puis ralentit en atteignant l'état final.
cubic-bezier(n,n,n,n)	Définir une courbe de Bézier à trois points. Aussi appelée courbe de vitesse. Les valeurs possibles sont de 0 à1les valeurs entre
initial	Réinitialisez cette propriété à sa valeur par défaut.
inherit	Si spécifié, l'élément lié utilise la transition de son élément parent.-timing-Valeur de l'attribut function.

Compatibilité du navigateur

transition-timing-Compatibilité des navigateurs pour l'attribut function, les numéros dans le tableau suivant représentent la version minimale du navigateur prenant en charge cet attribut ; tous les navigateurs populaires prennent en charge cet attribut.

	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 également

Veuillez consulter les tutoriels suivants :CSS3 Transitions.

Attributs associés :transition,transition-delay,transition-property,transition-duration.

CSS unicode-Attribut bidi CSS3 transition-Attribut property