Un ejemplo simplísimo de animación CSS3 para -de momento- navegadores Webkit (Safari, Chrome)

15 Oct

Ésto os va a encantar. Desde que descubrí que con CSS3 se podían animar elementos y controlar ‘timelines’, me he vuelto loco buscando un código cortito para hacer unos simples ‘fade in’ en los logos y en algún que otro menú. Cuando digo un código cortito, es porque simplemente quería prepararme un recurso sencillo para hacerme un ‘copypaste’ y no tirarme 3 horas escribiendo parámetros para finalmente conseguir álgo tán ‘chorra’ como un logo que aparece al cargar la página, con un suave desplazamiento y el paso de opacidad cero a cién por cién.

Las instrucciones -webkit-, digamos que unos parámetros css3 en prototipo, tienen una cantidad de posibilidades tán infinitas, que está claro que con ellas, a nivel de animación, se pueden hacer lo mismo que con flash, es una auténtica pasada, pero ¿os imaginais hacer una web con flash, a base de comandos? Te tirarías años…

Ya veremos si en un futuro próximo álguien se anima a implementar todo ésto en una aplicación gráfica, con su línea de tiempo y sus keyframes, como cuando usábamos aquella timeline dhtml de Dreamweaver, tán obsoleta hoy en día, pero que, reconoced los que diseñáis más que programáis, más fácil de manejar que las librerías AJAX tipo JQuery😉

De todos modos lo que me sucedía era ésto: cualquier web sobre webkit te da mil datos sobre como hacer animaciones, pero son tántos que no resulta práctico, al menos por el momento. Os voy a poner un código sencillísimo de entender en el que un div se desplaza y nos hace un ‘fade in’. La animación dura dos segundos, y se ejecutará una vez a la carga de la página; esto también nos evitará manejar el evento javascript onload o el document.ready.

En la hoja de estilos, deberemos definir lo que ocurre en los fotogramas de la animación ‘mianimación’:

@-webkit-keyframes mianimacion {
0% {
left:0px;
top:0px;
-webkit-opacity:0;
opacity:0;
}
50% {
left:0px;
top:0px;
-webkit-opacity:0;
opacity:0;
}
100% {
top:62px;
-webkit-opacity:10;
opacity:1;
}
}

¿Ok? Ésto, lo podéis configurar co-mo-que-rais, podéis cambiar las propiedades css que querais y añadir los estados que queráis, p. ej. que en el estado (o keyframe) 90% el fondo sea rojo, etc. La propiedad que os dé la gana, hasta el tamaño y/o inclinación del texto.

Luego, en el elemento en cuestión, además de su css de posición, márgenes, suputamá, etc, le añadís los parámetros y el nombre de la animación, que estará asociada a ésa línea de tiempo que hemos creado:

<div id="miobjeto" style="position: absolute; left: 96px; top: 62px; width: 100px; height: 100px;z-index: 1; background-color: yellow;
-webkit-animation-name: mianimacion;
/* el nombre que habíamos puesto en la timeline */
-webkit-animation-duration: 2s;
/* pueden ser, 0.7s, etc; */
-webkit-animation-iteration-count: 1;
/*cuántas veces quieres que se repita, y si quieres, 'infinite' (y a cascarla) */
-webkit-animation-timing-function: ease-in-out;
/* (ésto controla la aceleración, hay más parámetros, pero a mí éste me va dabuten) */ ">
</div>

Y voila! ¡Un fade-in para las imágenes en tu web, que no necesita plugins ni hostias, y que si tu navegador no lo soporta, pues no se visualiza y punto pelota!
NOTA: Está TESTADO y PROBADO, éste no es el típico caso, y me he encontrado MUCHOS de código que se postea a veces en foros y blogs “de memoria” y que luego no chuta porque el autor se ha dejado “algo”. ¡A disfrutarlo!😉

Si hacéis copypaste, no olvidéis borrar los comentarios, (lo que está entre /* y */ ) que alguien se puede liar…

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: