Las 20 Mejores Animaciones en CodeCanyon

Hubo un tiempo en la historia de internet en que tenías que usar Flash si querías añadir algunos efectos visuales a tu sitio web más sofisticados que los de de un GIF animado. Con rapidez nos encontramos que Flash había muerto y que cosas como CSS3 y HTML5 nos brindaban fantásticas animaciones y efectos para la web.

Si quieres añadir algunas impresionantes animaciones CSS a tu sitio web o próximo proyecto, aquí tienes una lista de las 20 mejores animaciones con CSS disponibles en CodeCanyon para abrir boca:

1. Aero - CSS3 Hover Effects

Añade un poco de matiz de cristal para los efectos hover de tus imágnes con Aero - CSS3 Hover Effects. 

Es totalmente responsivo y fácil de usar, y también lo encontrarás: 

• fácilidad para cambiar el color y la forma de círculo a cuadrado
• compatible con todos los navegadores—incluso Microsoft Edge
• compatible con SASS
• CzS modificable
• ¡y más!

Con 10 efectos incluidos en su lanzamiento y muchos más por venir, Aero - CSS3 Hover Effects es un estupendo paquete de animaciones CSS para los efectos hover de tus imágenes. 

2. MegaHover Mouse Over Effects

MegaHover Mouse Over Effects ofrece un robusto conjunto de efectos hover para imágenes compatible con Bootstrap 3.

También:

• usa los iconos de Font Awesome
• compatible en todos los navegadores
• totalmente responsivo
• y más

Integra y modifica con facilidad MegaHover Mouse Over Effects para crear cientos de efectos hover atractivos.

3. Animatia - CSS Image Hover Effects

¿Fácil de usar, tiempo de carga mínimo, altamente personalizable? Animatia - CSS Image Hover Effects hace todo esto y más.

Este lote de CSS incluye:

• alrededor de 115 efectos hover personalizables
• totalmente responsivo y archivos sencillos de usar
• iconos creados solo mediante CSS3 y también iconos de Font Awesome
• y más

Usa Animatia - CSS Image Hover Effects para los estilos de botones, efectos de superposición de capas, y otras animaciones CSS.

4. Hover Effects Framework

El Framework Hover Effects es una solución para animaciones con CSS realmente pulida.

Código limpio, totalmente responsivo, y:

• IcoMoon Ultimate Font
• 4 formas y 5 colores
• más de 50 animaciones
• y más

Hover Effects Framework está formado con un código limpio, y lo mejor de todo, incluye muchos ejemplos para iniciarte con algunas animaciones CSS magnificas.

5. Collection of Preloaders

Es posible que no vuelvas a necesitar otra colección de precargadores después de adquirir Collection of Preloaders.

Recibirás:

• buena documentación para facilitarte las modificaciones y personalizaciones.
  
• un conjunto de animaciones CSS flexibles y ligeras
• 27 precargadores únicos

Completamente 'mobile friendly', Collection of Preloaders es una buena adquisición para la caja de herramientas CSS3 de cualquiera.

6. CSS3 Image Hover Effects

Si has visto una animación para los efectos hover sobre una imagen, ya las has visto todas, ¿no?

No exactamente.

CSS3 Image Hover Effects incluye algunos efectos buenos y únicos.

Incluye:

• 22 efectos hover con CSS3 diferentes
• absolutamente increíble y completamente responsivo
• código CSS3 limpio
• y más

Échale un vistazo a CSS3 Image Hover Effects compatible con Bootstrap.

7. Image Hover CSS Library

Image Hover CSS Library es una librería de animaciones CSS3 para efectos hover sobre imágenes escalable y ligera que bien merece la pena considerar.

Es una colección de 58 clases de efectos hover elegantes, ninificados hasta pesar tan solo 25KB.

• funciona con cualquier contenido que admita el estado hover
• efectos hover únicos
• fácil de usar
• y más

Es difícil alejarte de los efectos hover para imágenes animados con CSS a los que estés acostumbrado, pero Image Hover CSS Library lo consigue.

8. SVG Logo Scroll Animation | CSS3 and Javascript

Es bueno alejarse de las habituales animaciones con CSS—efectos hover sobre las imágenes—y echar un vistazo a algo como SVG Logo Scroll Animation | CSS3 and Javascript.

Con un peso inferior a 4k, añade algunos efectos de scroll de página con SVGs animados.

Crea hermosas animaciones de página web con SVG Logo Scroll Animation | CSS3 and Javascript.

9. Viavi CSS3 Scroll Effects

Viavi CSS3 Scroll Effects es una solución para crear animaciones atractivas de scroll con CSS3 y HTML.

Algunas de las funciones que incluye son:

• 16 efectos de scroll en CSS3
• implementación sencilla
• totalmente responsivo
• y más

Empleando un sistema de retícula y capacitado para interpretar los gestos táctiles para los usuarios de móvil, Viavi CSS3 Scroll Effects no solo tiene una buena apariencia, además está muy bien implementado.

10. CSS3 Spinners & Loaders

¿Necesitas un cargador de archivos sin gifs?

Sin problemas. CSS3 Spinners & Loaders te lo proporciona. 

• encontrarás alrededor de 25 variaciones
• fácilmente personalizable
• ampliación sencilla

CSS3 Spinners & Loaders está muy bien documentado y es una solución cuyas animaciones están basadas únicamente CSS para los spinners y cargadores.

11. Midix - CSS3 Animation Effects without jQuery

Mediante el uso en exclusiva de CSS3, Midix - CSS3 Animation Effects without jQuery proporciona un conjunto sólido de 16 animaciones con CSS.

Podrás ajustar:

• la velocidad de la animación
• retrasar el comienzo de la animación
• los colores de los iconos

Con Midix - CSS3 Animation Effects without jQuery no recibirás solo una maravillosa colección de animaciones con CSS, también dispondrás de actualizaciones gratuitas y un servicio de soporte fantástico.

12. CSS3 Hover Effects

Otra buena elección es CSS3 Hover Effects.

Podrás cambiar facilmente lo siguiente:

• el color
• el grosor del borde
• cambiar la forma de círculo a cuadrado
• el espacio entre los bloques de texto

Con 497 iconos retina y 20 efectos diferentes, CSS3 Hover Effects constituye un excelente recurso para tener a mano.

13. VSPreloader - Ultimate CSS Animated Preloaders

Conforme los pre-cargadores evolucionan, VSPreloader - Ultimate CSS Animated Preloaders continúa siendo una de las soluciones más distinguible, creativa y bien parecida que encontrarás.

Características que incluye:

• 60 ayudas
• 40 muestras
• 30 animaciones
• colores ilimitados

Es increíblemente agudo y único.

Revisa de cerca VSPreloader - Ultimate CSS Animated Preloaders. Creo que te quedarás impresionado.

14. Heed - Pure CSS3 Animation Effects

Heed - Pure CSS3 Animation Effects proporciona todo aquello que desearías en una colección de animaciones con CSS.

Sencillo de instalar, editar y configurar con SCSS (archivo incluído).

• 20 opciones de color material design
• iconos de Font Awesome
• 15 efectos
• y mucho más

Heed - Pure CSS3 Animation Effects es retina friendly, con servicio de soporte accesible, e incluye actualizaciones gratuitas

15. Ayan - CSS3 Link Hover Effects

Mientras la mayoría de animaciones con CSS que encontrarás se centran en las imágenes y los efectos de página, Ayan - CSS3 Link Hover Effects nos suministra una increíble cantidad de efectos hover para los enlaces.

Encontrarás 30 atractivos efectos hover para enlaces creados con CSS3, y además:

• una sólida compatibilidad con los navegadores
• documentación de ayuda
• animaciones modernas
• y más

El paquete Ayan - CSS3 Link Hover Effects es creativo, eficaz y añade un buen toque dcon sus animaciones CSS sin resultar estas demasiado estridentes.

16. Sinister - Pure CSS Image Hover Effects

Presumiendo de disponer de más de 100 efectos hover, Sinister - Pure CSS Image Hover Effects proporciona un abundante número de efectos muy bien diseñados.

Incluye más de:

• 22 efectos de transición para contenido
• 18 efectos de transiciones de capas superpuestas
• 23 efectos de transición para botones
• 100 efectos hover

Sin hacer uso de JavaScript o jQuery, usando solo CSS Sinister - Pure CSS Image Hover Effects presenta:

• zoom de aproximación y de alejamiento
• rotación X y rotación Y
• rotación hacia la derecha y hacia la izquierda
• rotación y escala
• transición cúbica
• capa para hover
• y más

17. Stylish Social Media Animated Icons Style

Añade alguna animación CSS chula a tus iconos de redes sociales con Stylish Social Media Animated Icons Style.

Con un diseño limpio y nueve estilos diferentes entre los que elegir, también disfrutarás de:

• una implementación sencilla
• una base de código sólido y documentado
• sin dependencia de iconos o imágnes
• compatibilidad entre navegadores
• y más

Stylish Social Media Animated Icons Style añade un toque genial de color y animación mediante CSS al conjunto de tus iconos de medios sociales.

18. CSS3 Animations

Anima con facilidad elementos HTML como div, p, y body con animaciones CSS3.

Se trata de un fragmento de código que puede ser usado y aplicado en muchas situaciones durante el proceso de diseño.

Entre las funciones que incluye están:

• facilidad de uso y modificación
• solo CSS3, nada de JavaScript
• más de 10 animaciones

¿Añadirías CSS3 Animations a tu caja de herramientas de diseño?

19. Pure CSS3 Image Accordion

Construye tu propia slider o similar usando Pure CSS3 Image Accordion para crear atractivas animaciones CSS.

Es:

• totalmente responsivo
• no tiene una anchura fija
• cuatro opciones para titulares de imagen
• personalización sencilla

Crear música visual con Pure CSS3 Image Accordion.

20. CSS3 Mega Tooltip Animation Pack

¿Cansado de las típicas ayudas contextuales?

Añade un poco de magia con animaciones CSS ayudándote con CSS3 Mega Tooltip Animation Pack.

Este paquete de animaciones CSS para los bocadillos de ayuda contextual o "tootips" incluye:

• 10 efectos de animación
• 8 juegos de color preestablecidos
• documentación
• y más

El Paquete de Animaciones CSS3 Mega Tooltip también incluye una solución alternativa para Internet Explorer.

Conclusión

Aunque en Envato Market disponemos de muchas animaciones CSS diferentes, puede que no hayas encontrado exactamente lo que buscas.

No hay problema. ¡Puedes crear la tuya propia!

Busca en nuestra sección Envato eBooks títulos como Mastering CSS3, apúntate a uno de los diferentes cursos de código que ofrecemos, o encuentra y sigue uno de los estelares Tutoriales de Código CSS3.