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

Cuatro vulnerabilidades críticas en WordPress fueron las más explotadas por ciberdelincuentes en el primer trimestre de 2025

12 abril 2025

Cómo enviar un correo de agradecimiento a los que dejan un comentario en WordPress

6 noviembre 2018

GiveWP: La Plataforma de Donaciones para WordPress que Revoluciona el Recaudamiento de Fondos

22 marzo 2025

Wordfence Login Security: Autenticación 2FA para WordPress

18 diciembre 2024

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

Alerta de seguridad en WordPress: comprometen Gravity Forms para distribuir malware y tomar control de sitios web

13 julio 2025

Un ataque a la cadena de suministro afectó las versiones 2.9.11.1 y 2.9.12 del...

Plugins

Introducción a WPDirectory y cómo buscar eficientemente en directorio de plugins y temas

6 julio 2025

WPDirectory se ha consolidado como una herramienta esencial para desarrolladores, diseñadores y administradores de...

Plugins

El método CiteMET: cómo influir en ChatGPT y Perplexity para ganar tráfico y citaciones

3 julio 2025

Un innovador enfoque de optimización para motores de inteligencia artificial está transformando el marketing...

Plugins

David Carrero lanza su primer plugin WordPress: «Read More Universal», compatible con más de 20 temas populares

24 junio 2025

Ligero, sin configuración y multilingüe, el nuevo plugin se adapta automáticamente a Twenty Twenty-Five,...

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




Últimos artículos

Cómo añadir un icono a los links externos en WordPress

16 noviembre 2015

Cómo mostrar citas aleatorias en el sidebar de WordPress

16 enero 2018

La evolución del negocio de plugins en WordPress: De los gratis al pago recurrente

18 diciembre 2024

Implementación de un firewall en .htaccess para mejorar la seguridad de WordPress

18 diciembre 2024

Cómo mostrar reviews de TripAdvisor en WordPress

18 octubre 2019
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.