CSShake: Añadir animaciones vibrantes con CSS

CSShake es un nuevo recurso para los amantes de las animaciones logradas con CSS3, se trata de una pequeña hoja de estilo para aplicar efectos a los distintos elementos de una manera sencilla y rápida.

Esta hoja de estilo contiene aproximadamente unos 10 efectos vibratorios distintos, cada uno de ellos con un tipo de movimiento distinto.

hacer vibrar elementos con css

Utilizar este recurso dista mucho de ser complicado, tan solo debemos incorporar la hoja de estilo a nuestro proyecto y luego agregar las clases necesarias al elemento a animar.

Ejemplo de uso:

Agregamos la biblioteca:

<link type="text/css" href="csshake.css">

Anexamos la clase al elemento:

<div class="shake shake-little"></div>

Realmente sencillo.

Quizás el único aspecto negativo de este proyecto sea su peso, unos 24kb en su versión simplificada, un valor un poco elevado si tenemos en cuenta que este recurso solo añade una mejora visual a nuestro proyecto.

Desde el punto de vista de la compatibilidad, esta biblioteca es solo compatible con los navegadores modernos, en caso de utilizar un navegador que no acepte las propiedades CSS3 más modernas, el objeto en cuestión no realizara ninguna acción, algo que honestamente no me parece grave.

Como pueden ver implementar este proyecto no tiene mucha ciencia, algo que no dije es que la forma en que se reproducen las animaciones se puede configurar, por ejemplo lanzando cada animación según la acción hover del ratón.

CSShake es una hoja de estilo divertida, pero que hay que usar con precaución, no sea cosa que terminemos teniendo un sitio que tiemble en su totalidad 😛

Categorizado en: