soy Kseso y esto EsCSS

Sustituyendo Gif´s animados por Css y animación de sprites Css

Cómo lograr gif´s animados con puro CSS: transition y animation con el valor steps() y @keyframes. AMPLIADO: animación de sprites css

Sustituyendo Gif´s animados por Css y animación de sprites Css

·Por Kseso ✎ 19

Hoy por hoy es perfectamente posible "hacer" un gif animado utilizando sólo css y una imagen estática. Bueno, y si te empeñas, hasta puedes prescindir del jpg.
No estoy diciendo que lo hagas, pero posible lo es.

Para lograr que un jpg se comporte como un gif animado sólo se necesita una pizca de animación.
La propiedad transition es la forma resumida o acortada de declarar un grupo de propiedades afines. Entre estas está la propiedad que define la forma en la que se desarrolla la animación en el tiempo: Transition-timing-function.
Unos de los posibles valores admitidos por esta propiedad es steps. Con él la transición se realiza a saltos en vez de forma continua. Un ejemplo de su sintaxis:

.elemento { transition: all 4s steps(5) 0s; }

El resultado de esa declaración es el siguiente. Compáralo con una animación "normal" o lineal en el tiempo. Haz :hover

linear
steps

¿Vemos un ejemplo?

Ya tenemos la herramienta, ahora sólo necesitamos buscar una imagen de las cientos que hay en internet. Por ejemplo:

Para a continuación echar mano de css para obtener lo siguiente al hacer :hover sobre el monigote:

Los códigos son tan simples como un div y dentro la imagen, con el siguiente Css:

position: relative; margin: 0 auto; width: 52px; /* un 10% de la anchura de la imagen */ height: 72px; /* la misma que la imagen */ overflow: hidden; /* Para que sólo se vea un monigote de los 10 */ box-shadow: 0 0 3px #444; } #hola img { position: absolute; top: 0; left: 0; /* Para que se vea el primer dibujo */ transition: left 1.5s steps(9) 0s;/*El valor de 9: porque ya mostramos un dibujo de entrada */ } #hola:hover img { left: -450px; }

Como ves comentado en el Css, hay que tener presente que al inicio mostramos un de los dibujos que componen la tira, por lo tanto hay que tenerlo en mente para indicar el número de pasos de la animación y la posición final.

El valor del tiempo de desarrollo de la animación Css marca lo rápido/lento que se saluda el tirinene.

Pero este método tiene unos fallos al emular al gif:

  1. Retira el cursor antes de completarse la animación y verás qué sucede.
  2. El más evidente: los gif´s animados no necesitan nada para moverse.

Así que para corregir ambos sólo necesitamos un recurso más de Css: las animation y sus keyframes.
Mira:

Objetivo logrado. Ahora ya tenemos un "gif" que no lo es y que se comporta como un genuino gif.

En este segundo caso opté por colocar la imagen como fondo, en vez de un elemento img.

El css que lo hace posible es el siguiente:

#saludo { background: url(hola.png) no-repeat left top; width: 50px; height: 72px; margin: 0 auto; box-shadow: 0 0 3px #444; animation: hola-2 1.5s steps(10) infinite; } @keyframes hola-2 { 0% { background-position: 0px 0px; } 100% { background-position: -500px 0px; } }

Otros ejemplos con transition steps:

Hay muchas y muy buenas realizaciones en puro Css que utilizando el valor steps consiguen efectos como los siguientes:

Si no ves el baile, recarga el marco (botón derecho del ratón).

Otro que en su día fue muy mentado: este doodle de Google

El efecto de texto mecanografiado.

Más info

Si quieres, puedes ampliar estas propiedades de Css en los siguientes enlaces:

Adenda: Sprites Css animados

Esta misma técnica puede ser usada para animar los sprites. Vamos a unir en un sólo archivo jpg los dos: el del muñeco saludando y el del caballo al galope del doodle:

Para obtener el resultado de abajo (dos cajas que comparten un mismo sprite como background) sólo es cuestión de jugar con el valor de background-position y el número de pasos en animation

#arre { position: relative; width: 67px; height: 54px; overflow: hidden; background: url(sprite-2.jpg) no-repeat 0px -76px; animation: arre .5s steps(12) infinite; /* 12 frames, 12 pasos */ } #saludo-2 { width: 50px; height: 72px; background: url(sprite-2.jpg) no-repeat left top; animation: hola-2 1.5s steps(10) infinite; /* 10 frames, 10 pasos */ } @keyframes arre { 0% { background-position: 0px 0;} 100% { background-position: -804px 0; } }

avatar del Editor del blog

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