CSS transformations transitions animations
Les animations dans une page web, Dieu sait à quel point beaucoup d'entre nous aime cela. Mais voilà, charger des javascripts pour des effets parfois en dessous de nos espérances, ou encore un rendu un peu saccadé... on en mange beaucoup. C'est sans compter sur les nouvelles propriétés CSS qui nous arrivent des moteurs Webkit (Safari, Google Chrome, Midori...) et Gecko (Firefox, Epyphany...). En naviguant sur ma page d'accueil vous avez dut voir des "zoom" possibles en passant la souris sur certains éléments de ma page, c'est justement de cela dont nous allons parler.
Webkit est en phase de devenir le moteur de rendu Web le plus impressionnant du marché. Les aptitudes de ce moteur sont incroyables et tendent à nous monter la porte d'un Web plus conviviale en nous passant de plus en plus de de plugins flash, silverlight (lol) ou applet java. Mais aussi d'effets appliqués en Javascript.
Gecko joue bien le jeu, un peu plus en retard sur le sujet que nous allons traiter, mais les dernières compilations du moteur donnent des résultats au delà de ce que j'espérais.
Bref, trêve de blabla, parlons des transformations CSS et des animations.
En premier lieu, les "transform" qui fonctionnent bien sur Webkit ou Firefox. Ces propriétés, à préfixer pour chaque navigateurs tant que CSS 3 est encore un brouillon... vont permettre de modifier l'apparence d'un élément comme vous l'avez toujours espéré. Taille, déplacement, mais aussi (et c'est là que je suis très heureux...) rotation ! mais aussi "écrasement"... et oui....
Il s'agit simplement de spécifier la liste des transformations à appliquer à votre élément, prenons un exemple simple comme bonjour:
<div class="example1">Bonjour au fait !</div>
Appliquons lui un style:
.example1 {
border: 1px solid red;
width: 80px;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}
Le rendu est le suivant (si vous êtes sur Internet Explorer... désolé hein):
Vous avez compris, une rotation de 2 degrés dans le sens horaire, simple !
Vous pouvez essayer avec screw, translate, etc... mais passons à un truc plus fun :)
Cette fois-ci on va jouer à animer notre élément, seul les utilisateurs de webkit ou les testeurs de firefox 3.6 (et supérieur) pourrons voir l'animation, les autres ne verrons pas de transition mais directement l'état final.
Continuons avec une autre div:
<div class="example2">et re-bonjour tiens !</div>
Voyez ce que je fais ici:
/*Définition de mon style de base*/
.example2 {
border: 1px solid #FF0000;
background: #AEAEAE none;
/*je définis une transition possible pour toutes les propriétés css*/
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
}
/*maintenant, avec la souris sur le div*/
.example2:hover {
-webkit-transform: scale(1.4) rotate(40deg);
-moz-transform: scale(1.4) rotate(40deg);
border: 1px solid #0000FF;
}
Ce qui nous donne:
Comprenez bien, j'ai défini que toutes les propriétés seront modifiées en transition pendant 2 secondes en utilisant une fonction "standard" nommée "ease-in-out" (il en existe 6
- ease
- linear
- ease-in
- ease-out
- ease-in-out
- cubic-bezier(x1, y1, x2, y2)
Puis j'ai défini un état pour ma div "hover", c'est à dire "souris survolant", et webkit se débrouille pour faire la transition.
Alors pour Firefox < version 3.6 vous passerez directement d'un état à l'autre sans voir l'effet de transition. Patience, la version 3.6 est pour bientôt.
Bref, vous pouvez aller voir les pages en références ci-dessous, notez que j'ai omis d'aller très loin dans les explications mais que vous allez vite comprendre les interactions possible.
Personnellement je trouve sympa d'utiliser "scale" pour "zoomer" sur un élément sans faire péter le reste de la page. Niveau ergonomie ou accessibilité on peut gagner beaucoup avec ces nouvelles propriétés. Et à moi de vous mettre en garde: n'utilisez pas ces propriétés pour tout et n'importe quoi, pensez à rester standard et optimal !
Références:
Trackbacks
Pour ajouter un trackback (retrolien) sur ce ticket, utilisez cette adresse: http://www.metal3d.org/index.php/trackback/default/tb?id=blog%2F252
Salut,
C'est sympa mais 2 remarques tout de même :
- Le CSS est-il vraiment fait pour faire des effets ?
- Ca rame !
Oui et non. Le CSS est fait pour donner un style à un contenu. Et en fait on gérait déjà des effets depuis longtemps en CSS... et oui... qui n'a jamais ajouter des styles sur ":hover" pour les liens ou les menu ?
Le CSS est bien fait pour designer un site, les propriétés d'effet sont là pour apporter un confort qui impacte le manière dont apparait un élément. Et rien d'autre, donc c'est bien un style.
Et pour le fait que ça rame, personnellement sur Chrome ou Safari c'est super fluide. Seul Firefox rame à mort à cause des ombres... mais là faudra attendre la version 3.6 pour que tu puisses apprécier un peu plus de douceur dans le mouvement.
Et si tu es sur Chrome, alors peut-être que Windows y est pour quelque chose, car moi sur Linux et MacOSX ça ne rame pas du tout !