WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
No Result
View All Result

Cómo insertar fácilmente animaciones CSS en WordPress

Jorge López by Jorge López
17 diciembre 2015
in Plugins
Reading Time: 5 mins read
0

Una muy buena idea para dotar a tu web del dinamismo que necesita es mediante la inserción de animaciones. Con CSS es posible hacer que se muevan de manera vistosa, los elementos que queramos. En este artículo te enseñamos cómo insertar fácilmente animaciones CSS en WordPress.

Seguro que has visto en numerosas webs que uno de los elementos que la integran se desvanece, o se agita al pasar por encima con el ratón, o tiembla para captar mejor tu atención, o al cargarse la página se desplaza de uno de los laterales hasta su posición original… Todo esto, se puede llevar a cabo gracias a la nueva versión de CSS, CSS3. Antiguamente, si queríamos implementar esto en nuestra web teníamos o que recurrir a Flash (herido de muerte actualmente) o de alguna librería de Javascript la cual requería de un conocimiento técnico avanzado. Pero gracias a CSS3 todo esto es mucho más sencillo.

¿Por qué usar animaciones CSS?

El principal motivo del uso de una animación CSS debe ser siempre la usabilidad. No debes insertar en tu web elementos animados porque sí o simplemente porque te gusta como queda, debe tener un sentido. Las animaciones CSS deben ser utilizadas para narrar algo al usuario. Por ejemplo, si queremos comunicar al usuario que existe una nueva oferta especial que le puede interesar, podemos hacer que la oferta se agite; u otro ejemplo, podemos hacer que el cuadro de login se desvanezca una vez que el usuario se ha autentificado para comunicarle que ya no necesita hacerlo y que todo ha funcionado satisfactoriamente.

animaciones CSS en WordPress - Animate It

Artículos relacionados

Limitar el número de intentos en el login de WordPress

27 octubre 2015

Fathom Analytics: Alternativa Privada y Sencilla a Google Analytics para WordPress

19 febrero 2025

Los mejores y necesarios plugins para WordPress

21 marzo 2024

Plugin DropBox para copiar tus ficheros multimedia e imágenes en tu WordPress

2 julio 2012

Ya se que las animaciones CSS son muy golosas y que una vez las pruebas, quieres implementarlas en todos los elementos de la web que se te pasen por la cabeza, pero créeme cuando te digo que debes ser comedido. Si no tu página se parecerá a la primera web que hizo Homer Simpson, ¿recuerdas? Llena de elementos moviéndose… Una auténtica locura, vamos.

Tras estas explicaciones se te habrá hecho la boca agua, ¿no es cierto? Estás deseando incluir esta novedad en tu WordPress, ¿verdad? Estás de enhorabuena porque en esta ocasión te vamos a enseñar cómo insertar fácilmente animaciones CSS en WordPress.

El plugin Animate It!

¿Y cómo llevaremos a cabo todo esto? Pues muy sencillo, mediante un plugin. El plugin que vamos a utilizar para implementar animaciones CSS en WordPress es uno llamado Animate It! (que en castellano vendría a significar algo así como «Anímalo»). Este plugin te brinda la posibilidad de crear animaciones CSS en WordPress totalmente personalizadas a través del editor WYSIWYG del CMS.

Lo primero que debes hacer es instalarlo y activarlo. El plugin trabaja out of the box así que no tienes que preocuparte de configurar nada. Es muy simple.

Ahora, si nos vamos a crear una nueva entrada o una nueva página, verás que hay un nuevo botón en el editor que usualmente utilizamos para escribir nuestros contenidos. Para que te sitúes, el icono es un cuadrado de color gris con un lápiz en color blanco en el interior.

animaciones CSS en WordPress - Icono de Animate It en el editor de WordPress Haciendo clic en ese nuevo botón se nos desplegará una nueva ventana con la que podremos insertar animaciones CSS en WordPress. Como podrás ver de un vistazo, el plugin soporta muchas animaciones de muchos tipos, que describiremos a continuación.

animaciones CSS en WordPress - Ventana emergente de Animate It con todos los tipos de animación Las animaciones principales de Animate It son:

  • bounce: Provoca una animación de rebote
  • flash: Provoca una animación de parpadeo
  • pulse: Provoca una animación de crecimiento y decrecimiento suavizado
  • rubberband: Hace como si el elemento fuese de goma
  • shake: Provoca una animación de agitación
  • swing: Provoca una animación de balanceo
  • tada: El clásico «¡tachaaaaaán!»
  • wobble: Se mueve de lado a lado

Existen más animaciones que, básicamente, son variaciones de las anteriormente vistas. Pongamos como ejemplo bounceout. Bounceout provoca la misma animación de bounce solo que al final desaparece. De todas maneras te animamos a que pruebes todos los efectos, pero como te hemos indicado antes, sin pasarse…

Una vez elegido el tipo de animación que le queremos dar al elemento, ya solo queda ocuparnos del apartado más técnico, es decir, configurar el delay de la animación y la duración del mismo. Finalmente, debes seleccionar cuándo quieres que se active esta animación. Para ello contamos con tres opciones:

  • Click: Al hacer clic
  • Hover: Al pasar por encima con el ratón
  • Scroll: Al desplazarnos por encima del elemento en cuestión

Estas opciones no se excluyen, podemos seleccionar una acción, dos o tres, las que necesitemos.

animaciones CSS en WordPress - Opciones de configuración de Animate It Ya con todo configurado, podemos hacer uso del botón Animate It para probar nuestra recién creada animación. Si todo está correcto, hacemos clic en el botón Insert.

Verás que el plugin ha insertado en el contenido, un texto de Lorem Ipsum entre dos shortcodes. Elimina el contenido de prueba, es decir, el Lorem Ipsum y conserva los dos shortcodes ya que dictaminarán el comportamiento de la animación CSS en WordPress. Ahora dentro de los dos shortcodes, inserta el contenido que tu quieras: una imagen, un encabezado, un párrafo, una cita… Todo vale.

animaciones CSS en WordPress - Ejemplo de animación con Animate It Ahora ya solo queda publicar la entrada o la página y ver el resultado en la parte pública. Si has seguido todos los pasos, deberían aparecer y ejecutarse las animaciones correctamente.

Espero que te haya gustado este tutorial sobre cómo insertar animaciones CSS en WordPress. Como has visto, es muy sencillo dotar de dinamismo tu página. ¿A qué esperas para llevarlo a cabo?

Tags: animaciones cssanimaciones CSS en WordPresscss3efectos css en WordPressmover elementos con cssmover elementos en WordPress
ShareTweetSendSharePin
Jorge López

Jorge López

Soy programador web y me gusta mucho el diseño gráfico, la fotografía y todo lo relacionado con las nuevas tecnologías. En mis ratos libres me encanta dibujar y escuchar música. ¡No podría vivir sin ella! Aparte soy un friki de las series...las devoro

Te puede interesar...

Plugins

FluentAuth: el plugin de seguridad y autenticación para WordPress que concentra 2FA, “magic links”, social login y auditoría en un solo paquete ligero

9 octubre 2025

Resumen. En un ecosistema de WordPress acostumbrado a encadenar varios plugins para cubrir autenticación,...

Plugins

Un plugin “plug & play” para acelerar WordPress: así funciona Image Converter for WebP

29 septiembre 2025

Las imágenes siguen siendo el mayor “peaje” de carga en la mayoría de sitios....

Plugins

CF Football Bypass: el plugin que protege a los sitios españoles de los bloqueos masivos de IP durante el fútbol

27 septiembre 2025

CF Football Bypass nace de un problema muy concreto —y cada vez más frecuente—...

Plugins

WPO Tweaks 2.1: el “todo en uno” gratuito que acelera WordPress con un clic

19 septiembre 2025

WPO Tweaks acaba de dar un salto importante con su versión 2.1.x y se...

No Result
View All Result
Plugin Imagify, optimizar imágenes
wordpress hosting NVME
Elegant Themes WordPress
elementor editor plugin




Últimos artículos

Optimiza la velocidad de carga de tu sitio web WordPress con Divi Builder

24 abril 2023

Uso de Propiedades Personalizadas de CSS con theme.json en WordPress

18 febrero 2025

Cómo personalizar la pantalla de login de WordPress

28 junio 2019

6 plugins para redes sociales, incluyendo TikTok

21 enero 2020

Las mejores plantillas de WordPress para una ONG

24 diciembre 2016
WordPress Directo

WPDirecto.com es una revista especializada en WordPress y WooCommerce que ofrece una amplia gama de recursos, incluyendo tutoriales, análisis de plugins y plantillas, consejos de optimización y estrategias de SEO, para ayudar a los usuarios a mejorar y personalizar sus sitios web, manteniéndolos informados sobre las últimas novedades y tendencias en el mundo de WordPress.

Menu

  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

Información

WPDirecto es un medio de Medios y Redes:
  • Artículos patrocinados
  • Servicio de diseño web
  • Contacto
  • Acerca de MyR
  • Política de privacidad y cookies
  • Aviso Legal

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.

No Result
View All Result
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.