Las animaciones son una de las funcionalidades modernas del lenguaje CSS que han venido a solucionar diversos problemas y necesidades al crear páginas web y sobre todo aplicaciones. En este artículo te explicaremos por qué implementar animaciones con CSS y cómo conseguir diversos tipos de animación con código sencillo.
Por qué hacer animaciones CSS
La web es un medio cada vez más dinámico. Los diseños impactantes son cada vez más frecuentes y deseables y en ellos, la animaciones son una de las partes más fundamentales. Anteriormente, para resolver las necesidades de animación se usaba Javascript. Para ello, de manera programática se cambiaban las propiedades de CSS, de modo que se producía la animación de los elementos de la página.
El uso de Javascript era debido sobre todo a las carencias de CSS, ya que no ofrecía una manera para aplicar este tipo de estilos de presentación. Sin embargo, surgían algunos problemas que hacían poco recomendable esta práctica: Primero porque no proporciona una separación del código por responsabilidades (la animación, al ser algo relacionado con el aspecto, debería ser definida con CSS y no con Javascript). Pero sobre todo porque llevarse las animaciones del lado de la programación reduce considerablemente su rendimiento y desaprovecha recursos del ordenador como la tarjeta de gráficos.
Qué tipos de animaciones CSS nos podemos encontrar
Existen dos vertientes fundamentales en lo que respecta a animación CSS:
- Transiciones: En ellas podemos indicar qué propiedades de CSS deben cambiar de manera suavizada, produciendo la animación.
- Animaciones: Cambiar de manera automática las propiedades de los elementos, para que varíen de manera suavizada con el tiempo en una secuencia totalmente configurable.
Aunque sean más simples, las transiciones son mucho más utilizadas, ya que nos permiten realizar animaciones de manera rápida y sencilla, de modo que se produzcan diversos efectos estéticos, a medida que los valores de las propiedades CSS cambian. Las animaciones son por su parte mucho más potentes, ya que nos permiten cambiar varias propiedades de CSS de manera suavizada, desde el propio código de las hojas de estilo.
Transiciones CSS
Veamos ahora cómo realizar una animación CSS mediante una sencilla transición entre sus propiedades. Para ello usamos el atributo CSS «transition», al que le indicamos los siguientes valores:
- La propiedad CSS que queremos que tenga una transición suavizada de sus cambios.
- El tiempo que dura la transición.
- La función de transformación, que calcula la progresión de valores para la transición a lo largo del tiempo. Puede ser algo como ease, ease-in, linear, etc…
Un ejemplo sencillo donde aplicar una transición sería el efecto «hover», para que cambien los valores de una propiedad CSS cuando pasamos el ratón por encima. Podríamos conseguir una transición suavizada del color de fondo con un CSS como el siguiente:
.efecto_hover {
padding: 10px;
background-color: #ddd;
transition: background-color 0.5s ease-in;
}
.efecto_hover:hover {
background-color: #fdd;
}
Animaciones CSS
Para producir una potente animación CSS tenemos que incorporar otra serie de atributos y valores CSS. Gracias a las animaciones podemos conseguir que cambien cualquier número de propiedades y establecer de manera precisa diversos estados por los que debe pasar la secuencia de efectos.
Para establecer la animación debemos usar la propiedad «animation» e indicar diversos valores:
- Los «keyframes», que son los diversos estados por los que la animación pasará, con los valores CSS para cada uno.
- El tiempo de animación.
- La función de progresión para los cambios.
- El tiempo de retardo, si es que se desea que la animación comience a producirse pasado cierto tiempo.
- El número de repeticiones que deseamos para la animación.
- Si deseamos que la animación sea de ida y vuelta o que, al terminar la animación comience de nuevo por su valor inicial.
Algunos de estos valores son perfectamente opcionales. Realmente los importantes son la secuencia de los keyframes y el tiempo de la animación.
Veamos el código CSS para conseguir la animación de un elemento en la página.
.elemento_animar {
border-radius: 10px;
border: 1px solid red;
display: inline-block;
position: relative;
left: 0;
padding: 20px;
animation: miAnimacion 3s ease-in 1s infinite alternate;
}
@keyframes miAnimacion {
0% { padding: 20px; left: 0px }
50% { padding: 10px; left: 120px }
100% { padding: 50px; left: 300px }
}
Como has podido comprobar, en el elemento a animar se debe de colocar la propiedad «animation», con los valores mencionados anteriormente. Pero donde realmente se tiene que definir la secuencia de animación es en la declaración @keyframes. En ella indicamos el porcentaje de cada etapa y los valores de CSS que irá adquiriendo el elemento en cada momento, siempre realizando los cambios de manera suavizada.
Ejecutar la animación con Javascript
Por supuesto, aunque la animación se declara mediante CSS, con Javascript se puede fijar el momento en el que debe comenzar, pudiendo quizás responder a la acción del usuario, como la realización de un clic en el elemento. Para ello simplemente podemos asignar la clase CSS que implementa la animación de manera programática, como respuesta al evento «clic» o cualquier otro que se desee.
<div id="animar">
Haz clic para comenzar la animación!
</div>
<script>
function comenzarAnimacion(e) {
e.target.classList.add('elemento_animar');
}
document.getElementById('animar').addEventListener('click', comenzarAnimacion);
</script>