transition

Transition

English [trænˈzɪʃn] US [trænˈzɪʃən, -ˈsɪʃ-]

propriété de transition CSS syntaxe

Fonction : La propriété de transition est une propriété abrégée permettant de définir quatre propriétés de transition : transition-propriété transition-durée transition-timing-function transition-delay

Syntaxe : transition : propriété durée timing-function delay ;

Description : transition-property spécifie le nom de la propriété CSS qui définit l'effet de transition. Transition-duration spécifie le nombre de secondes ou de millisecondes nécessaires pour terminer l'effet de transition. La fonction de synchronisation de transition spécifie la courbe de vitesse de l'effet de vitesse. Le délai de transition définit le moment où l'effet de transition commence.​

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 transition CSS exemple

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 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