Las animaciones y transiciones son uno de los grandes cambios que trae CSS3 con sigo y son un sustituto ideal a las animaciones clásicas creadas mediante JavaScript; la función steps() permite controlar el movimiento de las animaciones y transiciones indicando el número de "frame" o saltos del cual queremos que conste una animación o transición en CSS.

En otras palabras; permite romper las animaciones o transiciones en segmentos o trozos.

Transición en CSS con cuatro frames

En este primer ejemplo veremos cómo variar el nivel de transparencia de un elementos progresivamente (a través de las transiciones en CSS) en un segundo de forma progresiva en cuatro partes; es decir:

• 1ms: 1.00
• 250ms: 0.75
• 500ms: 0.50
• 750ms: 0.25
• 1000ms: 0

Serán los niveles de opacidad que tendrá el color de fondo en el transcurso de un segundo en 4 "frames" en la transición:

Parte del CSS empleado es el siguiente:

            section .circle{
                background: rgba(200,200,200,1); 
	    transition: background 1s steps(4);
            }

Este otro muestra como quedaría nuestro ejemplo si no empleasemos la función steps() o las transiciones "clásicas":

Como podemos ver en el CSS anterior, la función steps() permite establecer el número de saltos en un tiempo determinado; para el ejemplo anterior se dieron cuatro pasos en 1000 milisegundos (1 segundo).

Animaciones con steps en CSS

Inclusive es posible emplear la función steps() en las animaciones en CSS por ejemplo si quisiéramos rotar una imagen en 4 segundos 360 grados en 4 pasos; es decir:

• 0s: 0 grados
• 1s: 90 grados
• 2s: 180 grados
• 3s: 270 grados
• 4s: 360 grados

Parte del CSS empleado es el siguiente:

      .car {
                animation: rotation-car 4s steps(4) infinite;
            }

Creando un reloj con CSS

En esta parte veremos como crear un sencillo reloj segundero empleando los steps() para no ejecutar movimientos continuos como ocurriría si no se emplearan los steps():

Reloj analógico con CSS

Mediante el valor steps() establecidos en 60 saltos:

.circle-clock .second {
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
	animation: circle-clock 60s steps(60) infinite;
}

El truco es ver que la animación se debe de ejecutar en 60 segundos (hasta que vuelva a repetirse) se debe de realizar en 60 frames o lo que es lo mismo, un segundo por frame; con esto se consigue el "efecto" de un reloj analógico tradicional que solo marca segundos.

¿Qué es lo que se anima?

La mano del reloj va girando desde los 0 grados hasta los 360 en 60 segundos; finalmente el ejemplo: