RGweb.fr : Le blog de Rémi Garcia sur l'actualité du web, le webdéveloppement, le webdesign, webmarketing, SEO, inspiration, ...

WebDesignerWall a rassemblé 47 animations en CSS3 qui valent le détour. Certaines sont encore une fois vraiment impressionnantes. Mais je vous laisse les découvrir par vous-même

Et voici macheist.com qui nous fait sortir des caisses d’un camion avec du CSS3. En ce moment les animations du genre fusent sur la toile et toutes sont plus originales les unes que les autres !

Jusqu’à présent pour ce qui est des animations en CSS3 on a vu une voiture qui avance et un AT-AT qui se déplace. C’était plutôt impressionnant et simple à mettre en place. Mais voilà que Benjamin Meyer vous en met plein la vue avec un jeu entièrement en CSS3 ! Tout ceci est encore plus impressionnant que ce que l’on a pu voir jusque là… Je vous laisse lire le billet de Benjamin Meyer sur son blog et vous amuser sur ce petit jeu !

Un exemple extrêmement basique pour mettre en pratique les animations webkit CSS3 : une voiture qui avance avec les roues qui tournent (oui c’est mieux) proposée par IT Shala. Comme quoi, à la vue du code, le CSS3 c’est simple et efficace !

Cette fois-ci c’est Nettuts+ qui nous offre un tutoriel complet sur les animations et transitions en CSS3. Au programme : changement de couleur progressif d’objets, rotation et translation d’images, etc. Bien sûr le tout sera exécuté simplement et uniquement en CSS3. Par contre, comme d’habitude quand il s’agit de transitions et animations, le tout ne sera efficace que sous les navigateurs webkit pour le moment (Safari & Chrome).

La nouvelle version de CSS a intégré les animations et transformations d’objets. Comme dans l’animation du AT-AT, on peut voir qu’il est possible de faire bouger n’importe quel objet HTML dans les directions et sens que l’on veut, en rotation, translation, etc. Le tout sera bien sûr réalisé sans jQuery ou autre librairie JavaScript, mais uniquement en CSS3.

InsideRIA.com nous propose dans un billet complet d’expliquer les principes de fonctionnement des animations en CSS3 et de bien savoir les utiliser et les mettre en place.

Voici à quoi le CSS3 peut servir : faire bouger un AT-AT !

Par contre, je préviens tout de suite, l’animation n’est visible qu’avec des navigateurs toolkit, soit Chrome et Safari. Cela dit, une fois passé sur un de ces navigateur, le résultat est plutôt impressionnant… On croirait du flash !

Le making of de cette animation est disponible sur le blog Optimum7.com et après étude de celui-ci, on peut se rendre compte qu’il n’y a rien de bien compliqué !