Primeros pasos con las animaciones en CSS
- Andrés Cruz
En esta nueva entrada sobre CSS daremos los primero pasos con las Animaciones en CSS; veremos como los @keyframes de CSS son fundamentales para las Animaciones, como animar nuestros elementos en CSS y algunas comparaciones entre las Animaciones y las Transiciones en CSS.
Animaciones vs Transiciones en CSS
Las Transiciones en CSS
Recordando un poco sobre las Transiciones en CSS son cambios suaves entre un estado a otro en un intervalo de tiempo determinado; por ejemplo pasar de un color rojo a azul en cuatro segundos:
Transición de colores
(Posiciona el cursor encima)
Fácilmente podríamos cambiar de un color a otro con JavaScript o jQuery accediendo directamente al valor de la propiedad backgroud y cambiando el color por otro; pero esto no son Transiciones ya que son cambios bruscos de un estado a otro.
Las Animaciones en CSS
Dos bloques componen las Animaciones en CSS:
Sin ambos componentes trabajando en conjunto no es posible realizar una Animación en CSS.
Al igual que las Transiciones en CSS las Animaciones actúan directamente sobre las propiedades del elemento HTML en cuestión en un intervalo de tiempo determinado para cambiar de un estado a otro; sin embargo con las Animaciones podemos tener un control bastante más preciso en el cambio en las propiedades de los elementos HTML.
Empezando con las Animaciones en CSS
Veamos una Animación de lo más sencilla para comenzar a entenderlas un poco; por ahora solo nos enfocaremos los @keyframes que permiten crear frames para definir cada una de los estados de las Animaciones; aunque solamente con ellas no es posible hacer funcionar una Animación.
Esta Animación permite cambiar el color de fondo (backgroud) de un elemento; en este caso de un contenedor -div-:
@keyframes cambiarColorFondo {
from { background: red;}
to { background: blue;}
}
Obteniendo la siguiente Animación en CSS:
Animaciones de colores
También tendríamos el mismo resultado en la Animación si la estructuramos de la siguiente manera:
@keyframes cambiarColor {
0% { background-color: red;}
100% { background-color: blue;}
}
Explicación del CSS anterior…
Empleando los porcentajes en lugar de los valores from{} (para un desplazamiento inicial de 0%) y to{} (para un desplazamiento final del 100%) es posible personalizar más los frames dados a través de estos porcentajes y esta es una de las ventajas que traen las Animaciones con respectos a las Transiciones; si tenemos configuradas las siguientes reglas en el @keyframes:
@keyframes cambiarColor {
0% {
background: #FF0000;
width:50%
}
25% {
background: #FFAAAA;
width:80%;
}
50% {
-webkit-box-shadow:inset 0px 0px 0px 10px #BB0000;
-moz-box-shadow:inset 0px 0px 0px 10px #BB0000;
box-shadow:inset 0px 0px 0px 10px #BB0000;
border-radius:200px
}
75% {
width:120px;
}
100% {
background: #FF0000;
width:50%
}
}
Explicación del CSS anterior…
Realizar el equivalente del ejemplo presentado anteriormente en Transiciones sería todo un reto.
Como podrás darte cuenta al poder acceder en intervalos de tiempo constante para modificar las propiedades resulta en algo bastante útil; es decir; en base al ejemplo anterior, en donde el tiempo global de la Animación son 8 segundos (el tiempo de las Animaciones es definido a través de las propiedades en la siguiente sección), vemos que el segundo valor de la propiedad es de un 25% lo que indica que se establecerán por completo los valores de las propiedades en el rango de 0 a 2 segundos de manera progresiva; es decir, cambiarán el color background y la anchura del contenedor de fondo (width) en el tiempo mencionada anteriormente; la misma lógica se aplica al resto de los porcentajes:
Los @keyframes esenciales para la creación de las Animaciones en CSS
Los @keyframes no son más que reglas que indican cómo será el comportamiento de los distintos frames o cuadros de toda la Animación y son el corazón de las Animaciones; Mozilla Developer Network los define como:
Propiedades de las Animaciones en CSS
Ya tenemos creada la Animación; sin embargo, empleando solamente con la regla anterior no es posible hacer funcionar la Animación; falta indicar el comportamiento y personalización de las Animaciones, para esto utilizamos varias propiedades las cuales explicaremos a continuación en la siguiente tabla:
| animation-name | Debe de indicar aquí nombre de la Animación; en otras palabras del @keyframes. |
| animation-duration | Como podrás imaginarte, aquí debes de indicar la duración que tendrá la Animación en segundos (s) o en milisegundos (ms). |
Ejemplo de Animaciones vs Transiciones y algo más
Podemos ver una comparativa entre las Animaciones, Transiciones y sin emplear Transiciones y Animaciones; ubica el cursor por encima de cualquiera de los contenedores div:
Además existen muchas otras propiedades que permiten personalizar aún más el comportamiento final de las Animaciones en CSS las cuales son y serán tratadas en siguientes entradas:
| animation-iteration-count | Especifica el número de veces que la Animación se va a ejecutar; los posibles valores son:
|
| animation-direction | Especifica la dirección de la Animación. |
| animation-delay | Especifica un tiempo dado es segundos para iniciar la Animación. |
| animation-timing-function | Especifica la curva de velocidad de la Animación. |
Tambien puedes visitar la documentación oficial ofrecida por la w3schools para validar toda la información y ver otra información como la comatibilidad con los navegadores; recuerda emplear los prefijos como -moz- y/o webkit-, entre otros para mantener la compatibilidad entre los distintos navegadores.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter