Agregar animaciones CSS a WordPress

Las animaciones pueden ser una característica atractiva y visualmente interesante para sus páginas web. Sin embargo, crear animaciones con Flash o JavaScript consumirá una parte importante de los recursos de su sitio.

Afortunadamente, puede agregar animaciones a su sitio web de WordPress con Hojas de estilo en cascada (CSS) en su lugar. Este lenguaje de codificación le permite incorporar animaciones ilimitadas en su sitio, pero sigue siendo relativamente accesible y fácil de aprender.

En este artículo, discutiremos cómo funcionan las animaciones CSS y cómo agregar una propiedad de animación CSS a su sitio web con y sin complementos. ¡Pongámonos en marcha!

¿Cómo funcionan las animaciones CSS? (Y por qué debería usarlos)

CSS3 brinda a los usuarios la oportunidad de crear animaciones cambiando el estilo de un elemento (por ejemplo, una imagen o un botón) con el tiempo. Puedes modificar tantas propiedades CSS del elemento como quieras, tantas veces como quieras.

A diferencia de las animaciones Flash o Javascript, las animaciones CSS evitan los problemas de compatibilidad del navegador y la codificación complicada. Esto le permite llamar la atención sobre funciones importantes sin efectos secundarios negativos, como la disminución del rendimiento.

Agregar animaciones CSS con un complemento

Si no confía en sus habilidades de codificación, lo tenemos cubierto. En su lugar, puede crear fácilmente animaciones CSS con un complemento.

Paso 1: Instale y active un complemento de animación CSS

Para comenzar, deberá instalar un complemento de animación CSS. Estamos usando Blocks Animation: CSS Animations for Gutenberg Blocks, una herramienta relativamente nueva creada específicamente para el Editor de bloques.

Puede encontrar este complemento navegando a Complementos> Agregar nuevo en su panel de WordPress. Una vez que lo localice, haga clic en Instalar ahora y luego en Activar :

Una vez completada la activación, vaya a la publicación o página donde desea incluir su animación simple.

Paso 2: diseña tu animación

A continuación, haga clic en el elemento que desea animar. En la pestaña Bloquear de la barra lateral, busque la sección llamada Animación , que se agregó cuando activamos el complemento en el Paso 1 . Aquí verá un menú desplegable que enumera varios efectos diferentes:

Puede jugar con tantas opciones de animación como desee para encontrar la que se adapte a su contenido.

Paso 3: personaliza el retraso y la velocidad

El complemento Blocks Animation también viene con una función de sincronización para personalizar el retraso y la velocidad de su animación:

La primera de estas dos configuraciones pospone el inicio de la animación. Esto puede ayudar a llamar la atención sobre su elemento después de que se haya cargado la página, o permitirle usar animaciones en combinación, como demostraremos en breve. Puede establecer la propiedad de retraso de la animación hasta cinco segundos.

Usando el menú desplegable de velocidad, puede hacer que su animación sea Lenta, Más lenta, Rápida o Más rápida . Una animación más lenta puede ser más sutil y menos discordante para los visitantes, mientras que una animación más rápida hará más para captar su atención.

Paso 4: guarde y obtenga una vista previa de su animación

Recomendamos guardar su publicación o página como borrador y obtener una vista previa de su elemento animado antes de publicarlo. Asegúrese de guardar también la propiedad del nombre de la animación si está trabajando con varias animaciones CSS en una página. Si bien las animaciones pueden resultar muy útiles, también tienen el potencial de distraer y hacer que sus páginas se sientan desordenadas.

Obtener una vista previa de su página y mantener sus animaciones relativamente simples evitará estos resultados no deseados. A continuación, puede ver nuestro ejemplo de animación CSS terminado, que empareja una imagen animada con el botón que diseñamos en los pasos anteriores:

En el caso de que encuentre que su animación no encaja con el resto de su contenido o no tiene el efecto que desea, simplemente puede regresar al Editor de bloques y ajustarlo. Esa es la belleza de usar un complemento de animación CSS: es rápido y fácil.

Agregar animaciones CSS sin un complemento

Si se siente cómodo editando los archivos de su tema, puede crear manualmente animaciones personalizadas sin un complemento. Se necesita un poco de conocimientos de codificación, por lo que es mejor dejar esta solución para aquellos con experiencia en desarrollo.

Antes de comenzar, asegúrese de hacer una copia de seguridad de su sitio. También es aconsejable utilizar un tema secundario, de modo que pueda volver fácilmente a los archivos predeterminados de su tema si lo necesita.

Paso 1: comprender las propiedades de CSS involucradas

Antes de realizar cualquier edición, hay ocho propiedades importantes a tener en cuenta al crear animaciones CSS:

• @keyframes: especifica los estilos que se aplicarán al elemento a través de la animación.
• animation-name: crea un nombre que puede usar para hacer referencia a la animación en otra parte de su código.
• animation-duration: define cuánto tiempo debe ejecutarse la animación.
• animation-delay: indica cuánto tiempo debe esperar una animación para comenzar una vez que se carga la página.
• animation-iteration-count: indica cuántas veces se debe ejecutar la animación.
• animations-direction: indica en qué dirección debe ejecutarse la animación.
• animation-timing-function: determina la curva de velocidad de la animación.
• modo de relleno de animación: especifica un estilo para el elemento cuando la animación no se está reproduciendo.
• animación: una propiedad abreviada para vincular fotogramas clave a elementos.

La más importante de estas propiedades para entender es el 'fotograma clave'. Este término proviene de los procesos de animación dibujados a mano, donde el cuadro principal se llamaba fotograma clave y los demás se dibujaban para entrar o salir de él.

En la animación CSS, el fotograma clave especifica qué sucede y cuándo. Toma este, por ejemplo:

 Ejemplo de @keyframes {
 0% {color de fondo: rojo;}
 25% {color de fondo: amarillo;}
 50% {color de fondo: azul;}
 100% {color de fondo: verde;}
 }

El fotograma clave anterior indica que durante el 25 por ciento de la animación, el color de fondo del elemento especificado cambiará de rojo a amarillo. Los porcentajes se utilizan normalmente para definir el tiempo de la animación. Sin embargo, desde y hasta se pueden usar en lugar de 0% y 100%, respectivamente.

Paso 2: crea tu archivo animate.css

Para agregar animaciones CSS, deberá crear un archivo en su editor de texto preferido utilizando las propiedades anteriores. Debe incluir fotogramas clave para cualquier animación que desee utilizar. Luego, los vinculará a clases CSS específicas para que pueda aplicarlos a los elementos de su sitio.

Aquí hay un ejemplo. En el siguiente código, primero creamos una animación de fotograma clave CSS utilizando las propiedades de transformación y visibilidad, lo que nos permitirá deslizar un elemento desde el lado derecho de la pantalla:

 @keyframes slideInRight {
de {
-webkit-transform: translate3d(100%, 0, 0);
transformar: traducir3d(100%, 0, 0);
visibilidad: visible;
}
a {
-webkit-transform: translate3d(0, 0, 0);
transformar: traducir3d(0, 0, 0);
}
}

Luego tenemos que vincular ese fotograma clave a una clase CSS. En este caso, se ha denominado slideInRight. Este código se colocará directamente después del fotograma clave anterior en el archivo:

 .slideInRight {
 -webkit-animation-name: slideInRight;
 nombre-animación: slideInRight;
 }

Puede repetir este proceso para crear tantas animaciones como desee. Luego, guarde el archivo como animate.css. Alternativamente, puede descargar el popular archivo Animate.css. Contiene los fotogramas clave y las clases CSS para docenas de animaciones populares para que no tengas que codificar tu propia animación compleja.

Paso 3: Sube tu archivo animate.css a tu sitio

Una vez que su archivo animate.css esté completo, deberá cargarlo en el directorio de su tema. Para hacer esto, acceda a su sitio utilizando el Protocolo de transferencia de archivos (FTP) y un cliente FTP como FileZilla. Puede encontrar las credenciales necesarias en su cuenta de hosting.

Deberá ingresar a su directorio public_html , navegar a wp-content > themes y encontrar la carpeta para su tema activo (o tema secundario):

Busque un subdirectorio con la etiqueta css . Si existe, cargue su archivo animate.css (o el archivo animate.mini.css de Animate.css) en él. En caso de que aún no tenga esta carpeta, puede crear fácilmente un nuevo subdirectorio y nombrarlo en consecuencia:

Después de que su archivo se cargue con éxito, no abandone su cliente FTP de inmediato. Deberá realizar una pequeña edición de archivos para acceder a esta hoja de estilo en su sitio de WordPress.

Paso 4: llame a la hoja de estilo de Animate a través de functions.php

A continuación, en la carpeta de su tema activo, busque su archivo functions.php . Al final, agregue este fragmento de código:

 add_action('wp_enqueue_scripts', 'wpb_animate_styles');
función wpb_animate_styles() {
 wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all');
}

Tenga en cuenta que, si cargó el archivo animate.min.css desde Animate.css, deberá usar animate.min.css en la última línea en lugar de animate.css.

Esto permite que su tema llame a la hoja de estilo que acaba de cargar para que pueda aplicar las clases en él a los elementos de su sitio. Una vez que haya guardado los cambios, regrese a su panel de control de WordPress.

Paso 5: aplicar animaciones usando clases CSS

Ahora puede aplicar cualquier clase en su archivo animate.css a elementos en sus publicaciones y páginas. Si usa el archivo Animate.css, puede hacer referencia a una lista completa de todo lo que incluye en GitHub.

Navega a la publicación o página que contiene el elemento que deseas animar. En el Editor clásico, cambia al editor de texto. Si está utilizando el Editor de bloques, haga clic en el icono de tres puntos de la barra de herramientas del bloque y seleccione Editar como HTML :

Luego, agregue la clase animada y la clase para su animación a la etiqueta del elemento:

Finalmente, obtenga una vista previa de su publicación o página. Su animación ahora debería estar funcionando:

Puede adaptar este proceso para incorporar cualquier animación en su archivo animate.css .

Mantenga su sitio luciendo genial con WP Engine

El uso de funciones visualmente interesantes, como animaciones, puede atraer a los visitantes de su sitio y lograr una presencia en línea más profesional. Aquí en WP Engine, nos enorgullecemos de brindar los mejores consejos y trucos para los desarrolladores de WordPress para que su sitio siempre luzca lo mejor posible.

Cuando se combina con nuestra plataforma de hospedaje de primer nivel, tendrá todas las herramientas que necesita para impresionar a sus usuarios. ¡Consulta nuestros planes hoy!