transition-duration
La propriété transition-duration définit le nombre de secondes ou de millisecondes que doit durer une animation. La valeur par défaut, 0s, indique qu'il n'y aura aucune animation.Il est possible de définir plusieurs durées, chacune sera appliquée à la propriété correspondante listée par transition-property (qui agit comme un index des propriétés impactées par les animations). S'il y a moins de durées que d'éléments dans cette liste, l'agent utilisateur dupliquera les durées. S'il y a trop de durées, la liste sera tronquée. Dans les deux cas, la déclaration CSS sera considérée comme valide.
Chaque durée est séparée de la suivante par une virgule (,).
<style>
.fond {
width: 400px;
height: 120px;
}
#carre {
width: 120px;
height: 120px;
transition-duration: 4s;
background-color: #ffff00;
margin-left: 0px;
}
.fond:hover #carre {
background-color: #ff00ff;
margin-left: 280px;
}
</style>
<div class="fond">
<div id="carre"</div>
</div>
Passez la souris sur le carré