¡Arre Caballito! Recreación del doodle en puro Css 11.4.12

¡Arre Caballito! Recreación del doodle en puro Css

¿Viste el doodle del 9 de Abril? Anda, antes de seguir pincha ese enlace y obsérvalo, pero regresa aquí ;-)
Si tienes curiosidad verás que necesita de js para que jinete y caballo echen a andar.

Pues como siempre hay algún genio de css dispuesto a demostrar todo el potencial del mismo. En este caso caso quien ha obrado la magia ha sido cssdeck.com

Vamos primero con la recreación del mismo en la versión css y después unos pequeños apuntes sobre el código css que obra la magia:

La carrera da comienzo y se para utilizando la técnica del radio botón oculto al :cheked y los selectores de hermano y adyacente (+ ~). El resto sólo es una "simple" transición css (transition) y una regla @keyframe para cambiar el valor background-position:


.doodle input:checked ~ .animate {
    animation: horse-ride .5s steps(12, end) infinite 5s;
    transition: all 5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
 }
@keyframes horse-ride {
    0% { background-position: 0 0; }
    100% { background-position: -804px 0; }
}

El efecto de rebobinado es fruto del delay (5s) y la sensación de los saltos al valor del tipo de animación declarado: steps.

"Y no hay más". Unos div´s vacíos, recuerda que el efecto va sobre el background, para tener una visión de la misma imagen del fondo en distintos fotogramas

El artículo y ejemplo original lo puedes ver aquí sin interferencias de los estilos con los del blog.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.