¡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.
@Kseso EsCss Kseso