Tictac Soluciones Informáticas > Diseño web > Animaciones con CSS3: keyframes

Animaciones con CSS3: keyframes

@-moz-keyframes movimiento{

0% {margin-left:0px;}

75% {margin-left:50px;}

100% {margin-left: 400px;}

}

@-webkit-keyframes movimiento{

0% {margin-left:0px;}

75% {margin-left:50px;}

100% {margin-left: 400px;}

}

@-ms-keyframes movimiento{

0% {margin-left:0px;}

75% {margin-left:50px;}

100% {margin-left: 400px;}

}

@-o-keyframes movimiento{

0% {margin-left:0px;}

75% {margin-left:50px;}

100% {margin-left: 400px;}

}

@keyframes movimiento{

0% {margin-left:0px;}

75% {margin-left:50px;}

100% {margin-left: 400px;}

}

#miImagen{
animation: movimiento 4s 4 alternate;
-moz-animation: movimiento 4s 4 alternate;
-webkit-animation: movimiento 4s 4 alternate;
-o-animation: movimiento 4s 4 alternate;
-ms-animation: movimiento 4s 4 alternate;

}

tictac

En la entrada de introducción sobre animaciones veíamos el funcionamiento básico sobre el ejemplo de rotar una imagen. En resumen, podíamos hacer que el navegador animase el cambio en una clase CSS eligiendo la duración y la función de interpolación y esto funcionaba con cualquier valor interpolable, es decir, que pudiera ser transformado en valores numéricos.
Respecto a la función de animación veíamos las que venían por defecto implementadas y usábamos ease-in-out. Hoy vamos a ver como podemos personalizar más la animación. El sistema para personalización de animaciones de CSS3 es similar al de cualquier programa de animación, basándose en “keyframes” o fotogramas clave.
Imaginemos una animación consistente en un desplazamiento de una imagen. Podemos querer que la imagen al principio se mueva muy lento, y después se mueva muy rápido. En el modelo de keyframes, deberíamos insertar un keyframe en el momento inicial y otro en el momento que queremos que acabe el movimiento lento, entre estos dos frames el movimiento será lento. Después añadiríamos otro frame al final para definir el movimiento rápido en la última parte de la animación. El ejemplo sería algo así:
@keyframes movimiento{
0% {margin-left:0px;}
75% {margin-left:50px;}
100% {margin-left: 400px;}
}
Como se ve en el ejemplo, cada keyframe se define como el % de tiempo de la animación en el que tiene que suceder. Si pusiéramos a funcionar esta animación con una duración de 4 segundos. Durante los primeros 3 segundos movería la imagen 50 píxeles a la derecha, y entre el segundo 3 y 4 movería otros 350 píxeles a la derecha la imagen, consiguiendo ese efecto de primero lento y después rápido.
       La sintaxis de una animación es @keyframe {}. Donde cada frame es: <%en el que sucede>{propiedades}. Siendo propiedades cualquier propiedad CSS interpolable.
Como la animación CSS es relativamente nueva, todavía no está soportada por todos los navegadores, y donde lo está, o se la espera es con prefijo propietario. Ahora mismo solo Firefox y navegadores webkit (Chrome, Safari, Android) hacen que funcione, pero Internet Explorer 10 y Opera 12 lo incluirán. Así que además de la versión sin prefijo para compatibilidad futura, deberíamos usar un CSS repetido del estilo del siguiente:
@-moz-keyframes movimiento{
}
@-ms-keyframes movimiento{
}
@-webkit-keyframes movimiento{
}
@-o-keyframes movimiento{
}
@keyframes movimiento{
}
Y nos falta saber como unimos esta animación a un elemento en concreto, la versión corta sería:
#miImagen{
animation: movimiento 4s 4
alternate-reverse;
}
Donde primero especificamos el nombre de la animación a utilizar, lo segundo es la duración, en este caso, 4 segundos. Después el número de repeticiones de la animación y por último la dirección, con alternate-reverse hacemos que primero haga el movimiento hacia la derecha y después lo haga al revés para volver a la posición inicial, por lo que las 4 repeticiones que hemos puesto son en realidad 2 completas, es decir, dos de ida y dos de vuelta.
El ejemplo completo es el que está como cabecera del artículo. Se pueden personalizar mucho más las animaciones, y hay más opciones que no hemos abordado todavía y que iremos desgranando en próximas entregas.
2018-07-02T17:38:18+00:0015/05/2012|Diseño web, HTML5|

2 Comments

  1. MLC 24/11/2012 en 15:51 - Responder

    Buenas, una consulta…estoy trabajando con animacion en css3 pero cuando valido el codigo por la pagina de la W3C me indica que todas las funciones de @-webkit-keyframes,@-moz-keyframes,etc aun no han sido implementadas por lo cual me genera errores. Habra forma de corregir eso sin afectar las animaciones ya hechas?. Gracias.

  2. Luis Hijarrubia 04/12/2012 en 08:26 - Responder

    Hola MLC, perdona por la tardanza en contestar. Las animaciones todavía son características experimentales, por lo que la única manera de que valide por la W3C sería usar solo la versión sin prefijo de navegador (@keyframes). Pero entonces no funcionaría en ningún navegador.

    A día de hoy si se quieren que funcione no va a validar, seguramente en un año o dos se pueda usar sin prefijos y ya valide. Es lo malo de usar tecnologías punteras.

    Muchas gracias por comentar.

Deje su comentario