CSS
Transitions CSS
Fiche écrite en 2014 et relue en 2026 : l’encadré en fin de fiche signale ce qui a changé depuis.
Une transition CSS anime le passage d’un état à un autre, ici au survol : la couleur, l’arrondi et la position changent en 300 millisecondes au lieu de basculer d’un coup. La propriété transition prend, dans l’ordre, les propriétés animées, la durée, la courbe de vitesse et le délai.
<div id="animate">Transition CSS3</div>#animate{
position:relative;
text-align:center;
color:#FFF;
display:table-cell;
vertical-align:middle;
width: 200px;
height:200px;
background-color: #F00;
border-radius: 5px;
transition: all 300ms linear 0ms;
left:0;
}
#animate:hover{
background-color: #00F;
border-radius: 50%;
color:#AAA;
left: 50px;
}