Ça fait plusieurs années que je n'utilise plus Flash pour faire l'animation de mes pages Web. jQuery est vraiment plus simple (et moins lourd) à utiliser.
Aujourd'hui, un étudiant m'a parlé de la propriété CSS3 "transition" que de plus en plus de navigateurs supportent. C'est encore plus simple à utiliser que jQuery et c'est disponible nativement dans les navigateurs.
Évidemment, IE9 et moins ne supportent pas cette propriété.
Si votre navigateur supportent la propriété "transition", tous les paragraphes de cet article peuvent s'animer. Vous n'avez qu'à passer votre souris sur ces paragraphes.
Voici le CSS nécessaire pour faire cette l'animation.
div.special {
background-color:#fff;
color:#000;
position:relative;
padding:3px;
transition: background-color 1s, font-size 1s, left 1s ease-out;
-webkit-transition: background-color 1s, font-size 1s, left 1s ease-out;
}
div.special:hover {
background-color: #ddd;
color:#666;
left:20px;
}
Comment fonctionne la transition
Dans la première définition CSS, on identifie le style initial du <div>. Dans la deuxième définition (div.special:hover), on mentionne le style lorsque le <div> est sous le curseur.
Jusque là, OK, rien de neuf...
La magie se fait avec la ligne "transition" (avec -webkit- pour Safari et les vieilles versions de Chrome). Voici comment l'interpréter :
Lorsque l'on place le curseur sur un paragraphe (hover), des styles CSS sont mis à jour. Cependant, pour les styles qui font partie de la transition, ils le feront sous forme d'animation. Dans ce cas-ci, on indique au <div> : "OK, tu vas faire la transition de ta couleur de fond, de ta couleur de texte et de ta position left en 1 seconde.
La dernière partie, que l'on nomme "easing" ou encore "timing", indique de quelle façon faire l'animation. Par exemple : en accélérant tout au long de la seconde, de façon constante, etc.
Note : Merci Jeff M. (H2013) pour cette notion.
Très bon moyen. Par contre, ce n'est pas encore supporter par tous les navigateurs (même pas IE9). C'est peut-être mon opinion mais ce n'est pas une bonne pratique de le faire en css seulement. Peut-être un tweak en jQuery si jamais transition ne marche pas en CSS ?
@Jonathan
Tu as parfaitement raison. Pour plusieurs projets avec ce type d'animations, j'utiliserais encore jQuery (en attendant qu'IE se mette à jour).
C'est cependant une bonne notion à retenir, puisque c'est supporté dans tous les navigateurs récents.
bonne chose à savoir! ça peut peut être régler mon problème de lag pour un projet sur iPhone/iPad (il y a beaucoup d'animations jquery..) merci!