CSShake : animations CSS3

Faites vibrer vos élément HTML en CSS3

CSShake est une feuille de styles CSS3 permettant de faire vibrer n’importe quel élément d’une page web. Elle est téléchargeable gratuitement.

Les animations en CSS3

Depuis l’arrivée de CSS3 il y a quelques années, il est maintenant possible de se passer du Flash, du Javascript ou du format d’images .gif pour créer de petites animations sur votre site web. Les animations en CSS3 permettent par exemple de modifier les valeurs de certaines propriétés CSS, sous forme de transition, sur une durée déterminée, lors du déclenchement d’un évènement. Avant cela on pouvait déjà modifier la couleur d’un lien au passage de la souris, par exemple, à l’aide de la pseudo-classe :hover, mais sans transition. Le lien passait directement d’une couleur à l’autre. Grâce aux transitions CSS3, on faire passer certaines propriétés (couleur, taille, bordure, etc.)  de leur valeur initiale à leur valeur finale de façon progressive.
Bon, forcément, comme c’est du CSS3, ça n’est pas compatible avec les navigateurs les plus anciens, mais bon, ces derniers ont vocation à disparaître plus ou moins rapidement.

La feuille de styles CSShake

En utilisant judicieusement les transitions et les transformations CSS3, on peut obtenir des résultats très intéressants. C’est le cas de la feuille de styles CSShake.css réalisée par @elrumordelaluz. Cette feuille de style permet de faire vibrer n’importe quel élément HTML  d’une page web. Plusieurs vibrations sont disponibles (horizontale, verticale, rapide…). Elles peuvent s’appliquer à vos photos, liens, paragraphes… en permanence, ou au passage de la souris et rien ne vous empêche de modifier la feuille de styles pour l’adapter à vos besoins.

La feuille de styles est téléchargeable ici.

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *