Controlar La Animación En CSS3 Con La Función Steps
La animación es una de las grandes características incorporadas en el CSS. En el pasado, la animación web sólo estaba disponible en el territorio de JavaScript o Flash. Pero, hoy en día, muchos sitios web optan por usar CSS para agregar una animación soportada en todos los dispositivos. En los anteriores artículos hemos hablado de varias cosas útiles que se pueden hacen con CSS3.
En este artículo, vamos a practicar una vez más con la animación CSS. Esta vez, vamos a mostrar el uso de la función steps en la animación con CSS, que nos permite controlar el movimiento de la animación, relajate, no es complicado ;)
¿Qué Es La Función steps?
Normalmente, la animación en CSS irá directo de principio a fin en el tiempo especificado. steps() es parte de la función de temporización de la animación. Esto nos permite controlar la animación para moverla gradualmente. El mejor ejemplo que muestra como usar la función steps(), sería el segundero de un reloj analógico. En el ejemplo replicaremos el funcionamiento del reloj con su segundero.
Imitar El Segundero De Un Reloj Con CSS
Primero vamos a añadir los fotogramas clave que hará girar el segundero 360 grados; la rotación se iniciará a los 90 grados (o en las 12 horas). Tenga en cuenta que el código siguiente puede necesitar un prefijo (-moz-, -o-, y -ms-) con el fin de trabajar en todos los navegadores.
[css]
@-webkit-keyframes rotation {
from {
transform: rotate(90deg);
}
to {
transform: rotate(450deg);
}
}
[/css]
El segundero se moverá constantemente cada segundo y completará un giro de 360 grados en 60 segundos. Por lo tanto, aquí vamos a establecer la duración de la animación de los años 60 y esto le dice al navegador de terminarla en 60 pasos con la funcion (60), justo de la siguiente forma:
[css]
.second {
animation: rotation 60s steps(60) infinite;
transform-origin: 100% 50%;
//styles decoration
background-color: #e45341;
height: 2px;
margin-top: -1px;
position: absolute;
top: 50%;
width: 50%;
}
[/css]
Se han creado dos demos para esto; uno con la función y el otro sin ella para ver la diferencia en su funcionamiento. A continuación encontrara los ejemplos ejecutandose y notar la diferencia del con y sin la función de CSS3.
See the Pen Funcion steps CSS3 by HostDime Colombia (@HostDimeColombia) on CodePen.
Finalmente
Como vemos, el uso de esta útil función, nos brinda un mayor control para la animación que implementemos con CSS3. Pero el anterior ejemplo es tan solo uno de las tantas cosas que podemos hacer al usar esta función. A continuación compartiremos algunas animaciones que usan esta función, esperamos que sirvan como inspiración.