Sustituyendo Gif´s animados por Css y animación de sprites Css 10.12.12
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
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
¿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:
- Retira el cursor antes de completarse la animación y verás qué sucede.
- 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:
- Transitions Css3: Guia de aproximación y uso.
- @keyframes: Animaciones con Css3.
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; }
}
%20y%20@keyframes.AMPLIADO:%20animaci%C3%B3n%20de%20sprites%20css){kind=link}
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
hola, queria comentar que me ha gustado mucho este post, pero me surge una duda... que seguramente vais a consderar tonta, pero estoy comenzando con esto y si no pregunto no lo voy a resolver...
ResponderEliminar¿porque usar una transicion de jpg pudiendo usar drectamente un gif? es decir, en que te beneficias? gracias por la paciencia ...
No hay dudas tontas, V.Cabezos. Lo tonto sería quedarse con la duda ;-)
ResponderEliminarDe entrada no estoy proponiendo cambiar uno por otro en cualquier situación.
Pero hay ocasiones donde un "gif css" (si me permites la mala expresión) puede tener sus ventajas, como por ejemplo controlar su reproducción.
Casualmente ayer vi este pen en codepen.io que, sin ser exactamente lo tratado en el post, visualmente sí. Hay una animación al hacer :hover sobre un elemento para atraer la atención sobre él.
Si vas al enlace, verás que no hay movimiento molesto hasta que la imagen recibe el foco, y cesa al perderlo.
Un saludo
lo entiendo, es una herramienta mas, la verdad es que el resultado del link es muy vistoso.
ResponderEliminargracias por responder :)
Cielos amigo este blog es una maravilla aunque no comento no me pierdo sus publicaciones aunque debo admitir que esta no la había pillado pero esta genial intentare luego hacer algo con esto para personalizar algunas cositas :P amm por cierto tienes el verificador de palabras activado no sería buena idea desactivarlo :) solo es sugerencia
ResponderEliminarGracias Magoplup.
ResponderEliminarMe alegro si encuentras de vez en cuando alguna ayuda en estas páginas.
Y pierde el miedo a comentar. Es lo que da salsa a los blogs y además ayuda a los admin.
Sobre la moderación, gracias por el aviso. Se había quedado de cuando permitía comentar como anónimo. Ya está retirado (¿viste como tu comentario me ayudó a mejorar? ;-} )
Un saludo
Qué bueno saber que te pude ayudar en algo son pequeños detalles que no nos fijamos como administradores y pocos los comentan sigue adelante y éxito con este fabuloso proyecto :)
ResponderEliminarMuy bueno, pero ¿¿cómo publico en una entrada individual la imagen con todo el código CSS??
ResponderEliminar¿A qué te refieres, Diego Ar? ¿Podrías explicar mejor cuál es la duda o consulta?
ResponderEliminarGracias
Es que yo armé una animación y no se ve animada en la entrada. Pero si la armo en DABBLET si queda con movimiento. Te paso el link de donde pruebo los códigos antes de usarlos en mi blog
ResponderEliminarhttp://desmenuzandocodigos.blogspot.com.ar/2013/02/animacion-con-css.html
ese supuestamente es una animación. Espero que haya sido un poco mas claro ahora. Desde ya muchas gracias.-
En FF sí va la animación, sin embargo en Chrome no.
ResponderEliminarViendo el código Css que incluyes dentro del post con <style>...</style> echo en falta los prefijos privativos.
Yo, personalmente, para ejemplos algo más complejos prefiero hacer uso de codepen.io o jsfiddle.net
Las ventajas son evidentes. Entre otras evito colisiones de estilos del ejemplo con el blog.
Dabblet no lo conozco, pero sabiendo que su autora lo es también de prefixfree supongo que lo tendrá habilitado.
Un saludo
Esta técnica es compatible con Internet Explorer 9?
ResponderEliminarPara este tipo de dudas lo mejor es consultar páginas como caniuse. Sólo es necesario introducir la propiedad base del ejemplo:
Eliminaranimation
Un saludo
Hola, esta muy bueno esto, ahora yo me pregunto esto es posible que sea accesible por los usuarios? por ejemplo yo tengo un foro IPB y quisiera que los usuarios puedan postear de estas animaciones.
ResponderEliminarHola disculpa se que esto es un poco viejo pero no logro hacerlo funcionar en chrome ni en safari, pero tu ejemplo puesto arriba en esta web si funciona en esos navegadores. Que es lo que estoy haciendo mal? o el código ha cambiado... Gracias soy nuevo en esto...
ResponderEliminargracias mire el código de tu sitio y vi que se utiliza @-webkit-keyframes hola-2 @-moz-keyframes hola-2 @-ms-keyframes hola-2 @-o-keyframes hola-2 y ya no mas solo @keyframes y -webkit-animation entre otras según cada navegador, gracias de todas formas ya me funcionó!!!
ResponderEliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarTambién puedes crear figuras desde el CSS y así evitarse emplear imágenes http://www.desarrollolibre.net/blog/tema/193/css/creando-un-fondo-vivo-con-css
ResponderEliminarEl efecto está lindo, aunque la técnica no es exactamente la misma. Justo el problema de ese diseño es que requiere muchas declaraciones para muchos elementos. En realidad, no está hecho con imágenes de fondo CSS.
EliminarUsando gradientes, tendríamos mucho código dentro del 'keyframes'.
Pero ya que lo mencionaste, aprovecho a hacer algo de autobombo y enlazo unos íconos que tienen animación CSS, son puro código y de un elemento. Además, se parecen a la propuesta del artículo en que son "un dibujito que se mueve"
Íconos CSS. Parte 1.
Están al final, bajo el título "Con animaciones".
uf! que demodé queda este artículo 3 años después de haber sido publicado,.
EliminarLa creación de "figuras css" tuvo su momento por entonces (hace dos, tres años). Yo también fui víctima de ellas: desde huevos, chocolates, yin-yang...
Y como, es lógico, el usar animaciones y transiciones css en ellas (las figuras css) fue inevitable.
Recuerdo que por ahí debe andar un Comecocos (Packman) persiguiendo a los fantasmas todo en puro Css.
También el recrear la aleatoriedad en ellas, Furoya compartió alguna en el blog, ya fuese jugando con t-delay o con el tiempo de ejecución/repetición emulando otra técnica Css anterior a todo esto: "The cicada principle".
Todo esto fue, como suele decirse, a long, long time ago
Pero este post en concreto no iba de eso. Sólo de emular gifs animados a partir de un jpg estático (sprites).
Gracias por tu comentario, Andrés.