Animaciones CSS
Una animación contiene las siguientes propiedades:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
Entonces observamos lo siguiente:
Una animación aplicada a un elemento o un grupo de elementos puede no solo contener: dirección, tiempo y frecuencia.
Por ejemplo en el siguiente fragmento animamos con un giro infinito a la figura que se encuentra por dentro del círculo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Animación</title>
<style>
#circulomayor{
width: 150px;
height:150px;
background-color: crimson;
border-radius: 50%;
position: relative;
}
#circulomenor{
width: 50px;
height: 50px;
background-color: tomato;
border-radius: 50px 100px 20px;
position: absolute;
top: 35px;
left: 45px;
animation: girar 2s linear infinite;
}
@keyframes girar{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="circulomayor">
<div id="circulomenor"></div>
</div>
</body>
</html>
Entonces una animación nos permite establecer comportamiento complejo e iterable de distintos elementos en la pantalla.
Las animaciones de diferencia de las transiciones poseen su paso de un estado inicial a un estado final con un intermedio entre ellas a través de fotogramas los cuales ayudan a indicar comportamientos específicos entre el inicio y el fin de ambos estados.
Por eso para establecer el comportamiento de todos los fotogramas
poseemos una regla llamada keyframes
en la cual por dentro podemos indicar el comportamiento que cada paso de la animación tendrá:
Por ejemplo:
@keyframes mianimacion {
from{
//estado inicial
}
to{
//estado final
}
}
Incluso que se disparen por la interacción de un usuario, por ejemplo que la animación anterior ocurra cuando el usuario haga :hover
sobre el elemento del DOM
.
#circulomenor:hover{
animation: girar 2s linear infinite;
}
Transiciones CSS
Las transiciones en CSS, poseen las siguientes propiedades:
transition-duration
transition-timing-function
transition-delay
transition-property
Donde estas solo nos permiten tener 2 estados, uno inicial y uno final sin efectos de animación intermedia.
Para el ejemplo anterior, lo que obtendríamos sería algo similar a esto:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Otro mas</title>
<style>
#circulomayor{
width: 150px;
height:150px;
background-color: crimson;
border-radius: 50%;
position: relative;
}
#circulomenor{
width: 50px;
height: 50px;
background-color: tomato;
border-radius: 50px 100px 20px;
position: absolute;
top: 35px;
left: 45px;
}
#circulomenor:hover{
background-color: green;
transition: background-color 3s ease-in;
}
</style>
</head>
<body>
<div id="circulomayor">
<div id="circulomenor"></div>
</div>
</body>
</html>
Donde cambiamos el color de fondo por medio de la propiedad transition
indicando la propiedad afectada, la duración de la transición y la regularidad con la cual se visualizará.
Entonces podemos identificar que:
- Las animaciones permiten generar comportamientos intermedios entre el estado inicial y final de la misma, con ayuda de los keyframes que generan fotogramas
- La cantidad de propiedades para aplicar efectos en una transición son menores en comparación con una animación.
- Probablemente para igualar una transición a nivel de keyframes con respecto de una animación deberemos aplicar el uso de JavaScript
- Puedes elegir usar transiciones cuando no requieras de puntos intermedios específicos de animación a los elementos y en cambio solo sea mostrar un estado incial y final