CSS transformations transitions animations

14/01/2010

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):

Bonjour au fait !

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:

et re-bonjour tiens !

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 -ase -inear -ase-in -ase-out -ase-in-out -ubic-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: -http://www.the-art-of-web.com/css/css-animation/?nohilite -http://webkit.org/blog/138/css-animation/

Ça peut vous intéresser aussi


Du CSS dynamique

J’adore le CSS, c’est un fait. L’avènement ...


IE et Firefox en guerre pour le Direct2D

J’ai lut cet article il y a quelques jours, et je ...


Mais quel navigateur je vais prendre

Dans un mouvement jusqu’alors jamais vu depuis des années,...


Minifier simplement vos CSS et Javascript

M’amusant un peu avec mon serveur pour corriger quelques ...

Merci de m'aider à financer mes services

Si vous avez apprécié cet article, je vous serai reconnaissant de m'aider à me payer une petite bière :)

Si vous voulez en savoir plus sur l'utilisation de flattr sur mon blog, lisez cette page: Ayez pitié de moi

Commentaires

Ajouter un commentaire

Guillaume - 15/01/2010

Salut,

C’est sympa mais 2 remarques tout de même : - Le CSS est-il vraiment fait pour faire des effets ? - Ca rame !

Metal3d - 18/01/2010

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 !

Grafal - 18/08/2010

Bonjour messieurs

je pense qu’il n’y a que les gens avertis qui change de navigateur soit 15% de la population Numérique

cans je fait du css (pas depuis longtemps) je le fait aussi pour des gens qui sont IE versus 8

Ajouter un commentaire

(*) Votre e-mail ne sera ni revendu, ni rendu public, ni utilisé pour vous proposer des mails commerciaux. Il n'est utilisé que pour vous contacter en cas de souci avec le contenu du commentaire, ou pour vous prévenir d'un nouveau commentaire si vous avez coché la case prévue à cet effet.