Depuis CSS3, on peut faire ce qu’on appelle des transitions, tout comme avec jQuery d’ailleurs.
Pour une même propriété CSS, une transition est le passage d’une valeur X à une valeur Y.
Exemple
On prend une boîte HTML simple :
<div id="demo"></div>
#demo {
width: 100px;
height: 100px;
background: red;
}
On souhaite animer cette boîte en augmentant sa taille (width) jusqu’à 300px sur une durée d’une seconde. Cette animation doit être faite sur le hover.
En jQuery nous pourrions faire :
$('#demo').on({
mouseenter: function() {
$(this).animate({
width: '300px'
}, 1000);
},
mouseleave: function() {
$(this).animate({
width: '100px'
}, 1000);
}
});
Et voici en CSS3, à partir du même code HTML et de la même base CSS :
#demo {
width: 100px;
height: 100px;
background: red;
transition: width 1s;
-moz-transition: width 1s; /* Firefox 4 */
-webkit-transition: width 1s; /* Safari and Chrome */
-o-transition: width 1s; /* Opera */
}
#demo:hover {
width: 300px;
}
On spécifie dans transition la durée de l’animation, 1s et sur quelle propriété CSS doit être appliquée l’animation, width.
On peut aussi faire une animation sur plusieurs propriétés à la fois en séparant les couples « propriété seconde » par des virgules.
Attention, les transitions CSS3 ne sont pas supportées par Internet Explorer, ce qui laisse encore .animate() de beaux jours devant elle…