Como especialistas en marketing, es importante crear contenido que no solo sea informativo sino también atractivo. Algunos especialistas en marketing logran esto agregando animación a sus artículos: es una excelente manera de atraer a los usuarios y llamar la atención sobre su contenido.
Al principio, las animaciones simples se crearon usando Flash. Sin embargo, el uso de Flash (para contenido web) puede ralentizar el rendimiento de su sitio web. Dado que la velocidad es un factor importante para el SEO y la experiencia del usuario, Flash no es bueno para los vendedores de hoy en día que intentan posicionarse en los resultados de búsqueda.
En su lugar, puede utilizar CSS, un lenguaje ligero que enlaza con HTML. Sin embargo, no queremos atacar a los espectadores con demasiada animación desde el principio; aquí es donde el retraso de la animación CSS resulta útil. En esta guía, veremos cómo funciona esta propiedad. Pero primero una reseña.
¿Qué son las animaciones CSS?
En resumen, CSS (hojas de estilo en cascada) afecta la apariencia de los elementos HTML en un sitio web. Los estilos CSS pueden ser estáticos (static) o animados.
La animación CSS funciona dirigiendo una o más propiedades CSS de un elemento para cambiar de un valor a otro. Algunas propiedades que se pueden animar incluyen el color de fondo, el tamaño y la posición en la página (para animar el movimiento). Puede que no parezca mucho, pero cuando lo pones todo junto, puedes obtener resultados impresionantes.
Para crear una animación CSS, primero debe comprender los fotogramas clave y las propiedades de la animación.
- @fotogramas clave son la base de la animación CSS. Indican el comienzo y el final de la animación y describen cómo debe comportarse cada elemento en cada etapa de la animación.
- Propiedades de animación empareje elementos CSS con @keyframes para definir aún más la naturaleza de la animación.
Hay algunas otras propiedades de animación adicionales con las que querrá familiarizarse a medida que aprende más sobre animaciones CSS, pero el resto de este artículo se centrará en cómo usar el retraso de animación CSS.
Retraso de animación CSS
los Retraso de animación la propiedad especifica cuánto tiempo transcurre antes de que comience la animación. Se expresa en segundos y milisegundos.
Sintaxis de retraso de animación CSS
CSS Retraso de animación propiedad tiene la siguiente sintaxis:
animation-delay: [time] | initial | inherit;
Como puede ver, hay tres valores posibles: tiempo, Inicialy heredar.
La primera opción es [time]que es el número de segundos o milisegundos antes de que comience la animación. Cuando el valor es positivo, por ejemplo 2s o 500msla animación comienza una vez transcurrido este tiempo.
Si el valor por [time] es negativo, la animación comienza como si se hubiera estado reproduciendo durante este tiempo. Por ejemplo, cuando el valor es -2sla animación comienza inmediatamente después de la secuencia de dos segundos.
Segunda opción, Inicial devuelve una propiedad al valor predeterminado de un elemento.
Finalmente, heredar reemplaza la propiedad con el hijo del padre.
Para cada animación también querrás definir duración de la animación y nombre-de-animación. Tal como puedes esperar duración de la animación determina cuánto tiempo tomará la animación. nombre-de-animación crea un punto de referencia individual para una animación específica.
El siguiente ejemplo muestra cómo se ven los diferentes retrasos de animación CSS cuando se aplican a una animación. (Para reproducir las animaciones, vuelva a cargar esta página).
ver la pluma retraso de la animación css de Christina Perricone (@hubspot) en CódigoPen.
Retraso de animación CSS entre bucles
Puede crear una animación que se detenga entre cada bucle. Desafortunadamente, Retraso de animación solo afecta el comienzo de la animación. Una vez que comience la animación, se repetirá sin demora. Tampoco existe una propiedad para «retraso de animación CSS entre iteraciones».
Para lograr este efecto, debes poner pausas en la propia animación.
Suponga que desea crear una animación que haga lo siguiente:
- En dos segundos, el elemento se expande a 1,5 veces su tamaño original.
- Luego, el artículo se reduce a su tamaño original en dos segundos.
- La animación se detiene durante un segundo.
- La animación se repite.
Gracias a las matemáticas rápidas, podemos calcular los porcentajes en los que se produce cada fase de la animación. En total, un ciclo dura cinco segundos (2 + 2 + 1). Por lo tanto, el primer paso tomará el primer 40 % de la duración de la animación, el segundo paso tomará otro 40 % y la pausa tomará el último 20 %.
Cuando aplicamos nuestros porcentajes en nuestras reglas de @keyframes, se ve así:
@keyframes grow-shrink {
40% { transform: scale(1.5); }
80% { transform: scale(1); }
}
Finalmente, configuraremos duración de la animación abajo 5s y establecer número de iteraciones-animaciones abajo infinito por lo que la animación se repite.
Eventualmente obtenemos el efecto de «retraso de animación» entre iteraciones.
ver la pluma Retraso de animación CSS: pausa entre iteraciones de Christina Perricone (@hubspot) en CódigoPen.
Si desea poner un retraso antes de que comience la animación, use Retraso de animación como se describió anteriormente.
Retraso de animación CSS
Las animaciones CSS bien hechas pueden proporcionar una interfaz valiosa para interactuar y recopilar comentarios sobre temas importantes. También pueden mejorar la experiencia del cliente y agregar personalidad a su marca.
Hay muchas otras cosas asombrosas que hacer con CSS y su contraparte HTML. No solo es emocionante jugar con las herramientas, sino que las habilidades que aprenda lo ayudarán a diseñar materiales de marketing en línea más efectivos.
Nota del editor: esta publicación se publicó originalmente en mayo de 2020 y se actualizó para que sea completa.
