El diseño web moderno ha abierto la puerta a páginas web que van más allá de los elementos estáticos en dos dimensiones. Ahora, los elementos tienen movimiento y cambio. Las animaciones en CSS son una herramienta que podemos utilizar para expandir la experiencia del usuario al crear movimiento en los elementos de una página web. Con ellas, podemos generar interacciones más claras y grandes entre el usuario y los elementos. En este post, te explicamos cómo funcionan las animaciones en CSS para que las puedas incorporar en el diseño de tu página web.
¿Qué son las animaciones en CSS?
Las animaciones son un recurso que nos permite cambiar de un estilo a otro de forma elegante usando la directiva @keyframes y la propiedad animation.
Puede que la definición de este recurso te suene muy similar a la definición de transiciones en CSS, pero te aseguramos que hay muchas diferencias. Lo primero es que con las animaciones en CSS podemos cambiar tantas propiedades de CSS como queramos, el número de veces que queramos. Aunque las transiciones nos permiten cambiar varias propiedades de CSS simultáneamente, las transiciones son un paso entre solo dos estados. Entonces, con ellas solo podemos controlar un estado inicial y un estado final, entre los cuales solo podemos controlar la velocidad de la transición y su curva de aceleración.
¿Cómo funcionan las animaciones en CSS?
Las animaciones en CSS se basan en un concepto muy utilizado en la edición de vídeo y cine: los keyframes. También conocidos como fotogramas clave en español, los keyframes nos permiten determinar puntos en el tiempo en los que un elemento tiene un estado específico usando la directiva @keyframes. Entonces, las animaciones son las que nos permiten pasar de un estado al otro y suceden entre estos fotogramas clave. A continuación, te explicamos el proceso para construir animaciones en CSS.
Lo primero que debes hacer para construir una animación es crear los keyframes, que ,como describimos anteriormente, definen las fases y estilos de la animación. Entonces, lo que hacen los keyframes es definir en qué estado está el elemento en cada porcentaje de tiempo usando las propiedades de CSS. Por ejemplo, podemos definir que un elemento en el 10% está azul oscuro, en el 30% es de color azul claro y en el 70% es verde claro, usando la propiedad color.
Una vez hayamos definido los keyframes, los asignaremos a un elemento CSS a través de la propiedad animation. Esta propiedad define cómo se anima el paso entre un estado y el otro.
¿Cómo definimos un keyframe?
Para crear fotogramas clave con las animaciones en CSS, necesitamos tres componentes: el nombre de la animación, los porcentajes que definen las fases de la animación y los distintos valores de las propiedades CSS en cada punto clave. A continuación, te ponemos un ejemplo de una animación construida:
@keyframes rebote {
0% {
tranform: scale (0.1);
scale: 0;
}
60% {
transform: scale (1.2);
opacity: 1;
}
100% {
transform: scale (1);
}
Como puedes ver, la animación anterior representa un movimiento en el que un objeto empieza siendo pequeño y transparente para luego ser grande y opaco, y luego termina con su tamaño original. Una vez tenemos esta animación creada, debemos insertarla en un elemento y definir su duración. Para hacer esto, basta con insertar las propiedades animation-duration y animation-name en el elemento que deseemos usando cualquier tipo de selector básico de CSS.
Con la propiedad animation-duration determinamos la duración de la animación usando la unidad s o segundos. En la propiedad animation-name insertamos el nombre que le hemos dado a nuestra animación, en este caso rebote.
Además, podemos unir estas dos propiedades en una sola línea de código utilizando la propiedad animation. Con esta propiedad, primero ponemos el nombre y luego la duración de la animación. Entonces, podríamos definir la misma animación de las siguientes dos maneras:
div {
animation-duration: 1.5s;
animation-name: rebote;
}
div {
animation: rebote 1.5s;
}
La ventaja de las animaciones en CSS es que son muy fáciles de usar y no requieren conocimientos de JavaScript. Además, varios navegadores soportan estas animaciones y se muestran correctamente incluso en equipos poco potentes, pues es el navegador el que las hace posibles. Si quieres conocer más sobre los trucos que tiene CSS a la hora de aplicar animaciones, te invitamos a leer el artículo de la página oficial de Mozilla Developer Network sobre el tema.
¿Quieres seguir aprendiendo?
Ahora que sabes cómo funcionan las animaciones en CSS, te invitamos a seguir aprendiendo sobre las posibilidades que tiene este lenguaje de programación para expandir la experiencia del usuario y el diseño de nuestras páginas web. ¿Y qué mejor lugar para hacer esto que en una formación intensiva que te convertirá en un experto en pocos meses? Así es, ¡KeepCoding tiene un bootcamp sobre desarrollo web perfecto para ti!
En nuestro Desarrollo Web Full Stack Bootcamp aprenderás todo lo que necesitas para ser un profesional en el ámbito del desarrollo web. Además, en el transcurso del bootcamp, crearás y diseñarás tu propia página web con diseño expandido gracias a la guía de nuestros profesores. ¿A qué esperas para unirte? ¡Matricúlate ya y destaca en el sector IT!
