Vale, por si no lo sabíais, las animaciones con CSS son alucinantes. A mi me ha dado por experimentar últimamente con ellas, y aquí tenéis el resultado:
Explicaciones
El reloj es un simple <div> hecho circular via border-radius, con un borde gris.
Los cuatro indicadores están hechos con dos pseudo-elementos del mismo tamaño, uno de ellos rotado 90 grados. Son del alto del reloj, así que forman una cruz perfectamente centrada. El efecto de mostrar sólo el puntero se consigue en vez de dándoles un fondo sólido, usando un fondo con radial-gradient, que es transparente excepto en el fragmento del 75 al 90%:
/* un círculo transparente desde el centro al 75%, de color desde el 75% al 90%, y transparente a partir de ahí */
background-image: radial-gradient(circle, transparent, transparent 75%, $clock-indicator-color 75%, $clock-indicator-color 90%, transparent 90%, transparent);Las agujas son tres elementos diferentes, posicionados absolutamente, y que siguen una animación llamada rotate con un tiempo diferente (60s para el segundero, 3600s para la aguja de los minutos y 86400s para la de los segundos).
steps()
El efecto de los segundos se consigue usando animation-timing-function: steps();, que es una función que toma el número de pasos que tiene que dar la animación (60 en nuestro caso, el número de segundos que tiene un minuto), y la palabra clave start o end, que es el momento en el que el valor cambiará.