soy Kseso y esto EsCSS

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

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

Por Kseso ✎ 0

¿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.

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 Don Kseso Kseso

Comentarios: 0

EsCss RSS del Blog RSSS Comentarios ᛯ Licencia Beerware Humans.txt ᛯ Diseño por Kseso SiteMap