Animaciones en CSS3
Tabla de contenido:
Animaciones en CSS3
Las animaciones en CSS3 permiten aplicar movimientos a las transición entre un estilo CSS y otro. Las animaciones constan de dos componentes: un estilo que describe la animación CSS y un conjunto de fotogramas (keyframes) que indican su estado inicial y final, así como posibles puntos intermedios que se pueden añadir dentro del recorrido.
Propiedades de las animaciones
Para crear una secuencia de animación CSS, se utilizará el elemento que se desea animar con la propiedad animation y sus sub-propiedades. Con ellas podemos no solo configurar el ritmo y la duración de las animaciones sino otros detalles sobre la secuencia de la animación. Una de las subpropiedades es el name la cual nos permite añadir los @keyframes ó instancias de animaciones que deseamos añadir.
Dentro de las subpropiedades animation podemos nombrar:
animation-delay
Tiempo de retardo entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación.
animation-direction
Indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.
animation-duration
Indica la cantidad de tiempo que la animación consume en completar su ciclo (duración).
animation-iteration-count
El número de veces que se repite. Podemos indicar infinite para repetir la animación indefinidamente.
animation-name
Especifica el nombre de la regla @keyframes que describe los fotogramas de la animación.
animation-play-state
Permite pausar y reanudar la secuencia de la animación
animation-timing-function
Indica el ritmo de la animación, es decir, como se muestran los fotogramas de la animación, estableciendo curvas de aceleración.
animation-fill-mode
Especifica qué valores tendrán las propiedades después de finalizar la animación (los de antes de ejecutarla, los del último fotograma de la animación o ambos).
Ejemplo:
Vamos a crear un estilo css con la clase circulo:
body{
background: #800B0D;
}
.circulo{
height: 100px;
width: 100px;
border-radius: 100%;
background: white;
position: relative;
}
Ahora lo declaramos en el HTML
<div class="circulo"> </div>
Ahora en nuestro CSS podemos declarar el nombre de la animación que deseamos crear, así como las instancias los puntos que puede recorrer dicha animación que pueden ser from hasta to o también porcentajes.
Entonces vamos a crear el keyframe recorrer
body{
background: #800B0D;
}
.circulo{
height: 100px;
width: 100px;
border-radius: 100%;
background: white;
position: relative;
}
@keyframes recorrer{
0%{left: 0%;}
100%{left: 90%;}
}
Nota:
Si notamos que la animación no se ejecuta en la animación debemos de añadir los prefijos, según el navegador las cuales serían;
- Chrome: -webkit
- Firefox: -moz
- Opera: -o
- Internet Explorer: -ms
Entonces para el Chrome seria
.circulo{
height: 100px;
width: 100px;
border-radius: 100%;
background: white;
position: relative;
}
@keyframes recorrer{
0%{left: 0%;}
100%{left: 90%;}
}
Declaramos el recorrido
@keyframes recorrer{
0%{left: 0%;}
100%{left: 90%;}
}
Ahora en la clase circulo asignamos la propiedad animation:
.circulo{
height: 100px;
width: 100px;
border-radius: 100%;
background: white;
position: relative;
animation-name: recorrer; /**/
}
Empezaremos a notar la animación.
Ahora si deseamos compatibilidad con todos los navegadores podemos usar:
-webkit-animation-name:recorrer /* Safari y Chrome */ -moz-animation-name:recorrer /* Firefox */ -ms-animation-name:recorrer /* Internet Explorer */ -o-animation-name:recorrer /* Opera */ animation-name:recorrer /* W3C */
Ahora podemos añadir la duración de la siguiente manera:
.circulo{
height: 100px;
width: 100px;
border-radius: 100%;
background: white;
position: relative;
animation-name: recorrer;
animation-duration: 5s;
}
Podemos aplicar la curva de velocidad de la siguiente manera:
.circulo{
height: 100px;
width: 100px;
border-radius: 100%;
background: white;
position: relative;
animation-name: recorrer;
animation-duration: 5s;
animation-timing-function: ease-in-out;
}
Esta curva de animación puede ser:
ease: comienzo rápido, luego velocidad constante y final lento.
ease-in: al revés que ease.
ease-out: similar a ease con final a velocidad constante.
ease-in-out: comienzo lento y progresión a velocidad constante.
linear: progresión a velocidad constante.
step-start: salto de la situación inicial a la final al comienzo.
step-end: salto de la situación inicial a la final al final.
steps (numeroDePasos, end) [El parámetro numeroDePasos establece el número de pasos intermedios entre la situación inicial y la final, lo que equivale a que la animación se vea como “pequeños saltos”.]
cubic-bezier(valor0a1, valor0a1, valor0a1, valor0a1) [Esta forma de definición permite especificar la curva temporal de forma matemática para definir formas de cambio personalizadas]
en este último caso podemos personalizarlo desde la siguiente web y copiar los valores.
Para compararlo en nuestro documento HTML podemos duplicar el div con la clase circulo y en el CSS aplicamos de la siguiente manera:
.circulo{
height: 100px;
width: 100px;
border-radius: 100%;
background: white;
position: relative;
animation-name: recorrer;
animation-duration: 5s;
animation-timing-function:ease-in-out;
}
.circulo:nth-child(2){
animation-timing-function: ease;
}
@keyframes recorrer{
0%{left: 0%;}
100%{left: 90%;}
}
Ahora podemos aplicar el tiempo que tardaría en presentarse la animación
.circulo{
height: 100px;
width: 100px;
border-radius: 100%;
background: white;
position: relative;
animation-name: recorrer;
animation-duration: 5s;
animation-timing-function:ease-in-out;
animation-delay: 3s;
}
Ahora las veces que puede repetirse:
.circulo{
height: 100px;
width: 100px;
border-radius: 100%;
background: white;
position: relative;
animation-name: recorrer;
animation-duration: 5s;
animation-timing-function:ease-in-out;
animation-delay: 3s;
animation-iteration-count: infinite;
}
Luego podemos aplicar la dirección que tendrá la animación:
.circulo{
height: 100px;
width: 100px;
border-radius: 100%;
background: white;
position: relative;
animation-name: recorrer;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-delay: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
esto lo podemos trabajar también desde una sola línea:
.circulo{
height: 100px;
width: 100px;
border-radius: 100%;
background: white;
position: relative;
animation: recorrer 5s ease-in-out 3s infinite alternate;
}
Espero les pueda servir el siguiente artículo, saludos
