Cómo crear animaciones de fotogramas clave CSS
CSS brinda a los desarrolladores la capacidad de dar vida a sus páginas web mediante la animación de fotogramas clave.
La animación CSS se logra alterando el estado inicial de un elemento HTML a través de sus diversas propiedades. Algunas propiedades CSS generales que se pueden animar incluyen:
- Ancho
- Altura
- Posición
- Color
- Opacidad
Estas propiedades generales de CSS son manipuladas por elementos CSS específicos para crear el resultado deseado. Si alguna vez se ha encontrado con un elemento animado en una página web, es probable que el elemento haya sido animado mediante la animación de fotogramas clave.
¿Qué es un elemento de fotogramas clave?
El elemento de fotogramas clave se puede utilizar en uno o más elementos HTML a los que tiene acceso. Identifica un punto específico en el estado de un elemento y dicta la apariencia que este elemento debe tener en ese momento.
Esto puede parecer mucho para digerir, pero en realidad es bastante simple. El elemento de fotogramas clave tiene una estructura bastante sencilla que se puede entender y ajustar fácilmente para adaptarse a cualquier requisito de animación.
Ejemplo de estructura de fotogramas clave
@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}Supongamos que desea animar un botón rectangular verde convirtiéndolo en un botón redondo azul.
Dentro de los parámetros de la de la sección anterior se tendrá que colocar todo lo necesario peinar tener el elemento que parece un botón verde rectangular, a continuación, en el que la sección, va a colocar todos los requisitos de estilo para transformar este botón en un botón redondo de color azul .
Si estás pensando, "eso no suena demasiado a animación". Bueno, eso es porque un componente clave de todo este proceso aún no se ha introducido: este componente es la propiedad de animación.
La propiedad de la animación
La propiedad de animación tiene un conjunto de subpropiedades diferentes; estos se utilizan en combinación con la estructura de fotogramas clave anterior para animar el elemento HTML deseado.
Sin embargo, solo necesita conocer cinco de estas subpropiedades y los valores que están asociados a ellas, para lograr la animación en sus proyectos. Estas propiedades se conocen como:
- Nombre de la animación
- Duración de la animación
- Función de temporización de animación
- Retraso de animación
- Recuento de iteraciones de animación
Usar animación en una página web
Usando el escenario anterior, el objetivo es crear un botón animado.
Ejemplo de animación de botón
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation</title>
<style>
/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}
</style>
</head>
<body>
<!-- placing the button element with the text "Click!" on the web page -->
<button class="btn">Click!</button>
</body>
</html>
La sección de animación del código anterior contiene las cinco subpropiedades que se mencionaron anteriormente. Cada propiedad tiene una función muy distinta y juntas trabajan para animar cualquier elemento HTML al que están diseñadas para apuntar.
La propiedad Animation-name
Esta propiedad es la propiedad más importante de la lista. Sin la propiedad animation-name , no tendría ningún identificador para pegar al elemento keyframes , haciendo que todo el código dentro de sus parámetros sea inútil.
Si olvidó incluir una o dos de las otras subpropiedades, es posible que aún tenga una animación bastante decente. Sin embargo, si olvidó la propiedad animation-name, no tendría animación.
La propiedad de duración de la animación
Esta propiedad se utiliza para definir la cantidad de tiempo que debe tardar un elemento animado en la transición de un estado al siguiente.
En el ejemplo anterior, la propiedad de duración de la animación se establece en 5 segundos (5 s), por lo que el botón rectangular verde tendrá un total de 5 segundos antes de que se convierta por completo en un botón redondo azul.
La propiedad Animation-delay
Esta propiedad es importante por una razón; algunas páginas web pueden tardar unos segundos en cargarse por completo (debido a varios factores diferentes). Por lo tanto, la propiedad animation-delay evita que la animación se inicie inmediatamente en caso de que la página web tarde un poco en cargarse.
En el ejemplo anterior, la propiedad animation-delay se establece en 4s, lo que significa que la animación no comenzará hasta 4 segundos después de que se visite la página web (dando a la página web tiempo suficiente para cargar antes de que comience la animación).
La propiedad Animation-iteration-count
Esta propiedad indica cuántas veces el elemento animado debe pasar de un estado al siguiente. La propiedad animation-iteration-count toma valores que son palabras y números. El valor numérico puede ser cualquier cosa desde 1 en adelante, mientras que el valor de la palabra suele ser " infinito ".
En el ejemplo anterior, el valor de recuento de iteraciones de animación se establece en " infinito ", lo que significa que mientras la página web esté activa, la propiedad del botón se animará de un estado al siguiente, continuamente.
La propiedad Animation-timing-function
Esta propiedad dicta el movimiento del elemento animado a medida que pasa de un estado al siguiente. A la propiedad animation-timing-function generalmente se le asigna uno de los tres valores de facilidad.
- Facilidad en
- Facilitarse
- Facilidad de entrada y salida
El valor de entrada y salida fácil se usa arriba; esto cambia lentamente la animación de un estado a otro. Si el objetivo es crear una transición lenta cuando el botón se está transformando de un rectángulo verde a un círculo azul, usaría el valor de entrada fácil . Si solo quisiera la transición lenta en la dirección opuesta, usaría el valor de salida fácil .
Reducir nuestro código
En la mayoría de los casos, la reducción de la duración de un programa se considera un enfoque práctico. Esto se debe principalmente a que menos líneas de código reducen la probabilidad de que los errores pasen desapercibidos en sus programas.
El código anterior se puede reducir en cuatro líneas. Esto se puede lograr simplemente usando la propiedad de animación sin identificar explícitamente cada una de sus subpropiedades.
Reducir el código para el ejemplo de animación de botones
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation</title>
<style>
/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}
</style>
</head>
<body>
<!-- placing the button element with the text "Click!" on the web page --
<button class="btn">Click!</button>
</body>
</html>
En el código anterior, se usa una línea de código para lograr el mismo resultado que anteriormente tomaba cinco líneas de código; así es como se produce un código más limpio .
Ahora puede animar sus páginas web
Ahora tiene las habilidades necesarias para animar cualquier elemento HTML en una página web. También debe comprender cómo la propiedad de animación y el elemento de fotogramas clave funcionan juntos para hacer posible la animación CSS.
La propiedad de animación con su lista de subpropiedades extensa es sin duda interesante. Aún así, existe un amplio espectro de otras propiedades CSS que pueden resultarle útiles.
Crédito de la imagen: Josh Riemer / Unsplash