@keyframes Animaciones con Css3. Una guía de aproximación e inicio.

@keyframes Animaciones con Css3. Una guía de aproximación e inicio.

Por Kseso ✎ 15

Actualizado al W3C Working Draft del 3 Abril 2012. Puedes ver relación con los cambios introducidos aquí.

El borrador de la W3c que desarrolla las animaciones basadas en Css es "CSS Animations Module Level 3".
Podríamos decir que es una simple transición o cambio de valor de una propiedad a otro, con intervención o sin ella del usuario. Vamos, que se desencadena al cargar la página o tras una acción del visitante.

Ese ser "automático" y el hecho de que podamos alterar la línea de tiempo y desarrollo es lo que las diferencia de las transforms. A estas últimas tenemos un estado inicial y uno final. Se aplican tras algún evento y excepto el delay (retraso en iniciarse) y el tiempo de ejecución poco más podemos modificar.

Sintaxis de las @keyframes

Está formado por la palabra "@keyframes seguida con un espacio en blanco del nombre que hayamos elegido para esa animación (animation-name) el corchete de apertura y cierre {} y dentro el conjunto de reglas que queramos declarar. Quedaría así

@keyframes girar { /* conjunto de reglas */ }

La palabra girar identifica a la animación y será la utilizada para aplicarla al elemento que deseemos

Advertencia previa antes de seguir:
A día de hoy son necesarios los prefijos privativos de cada navegador para utilizarlas. Así que aunque en los códigos mostrados no los añada (para no liar la madeja), en las realizaciones son necesarios.
Fíjate bien dónde se añade el prefijo, a diferencia de casi todas las demás propiedades que lo necesitan, aquí se colocan tras la @ y no antes de ella:

@-moz-keyframes girar { /* conjunto de reglas */ }

El conjunto de reglas en las animaciones Css: @keyframes

Las reglas que se definen dentro de @keyframes también tienen su sintaxis característica.
Cada frame o paso está compuesta por un valor en % y encerradas entre corchetes las parejas propiedad:valor que deseemos
Lo verás mejor en código posterior a la animación del ejemplo de abajo.

Un ejemplo sencillito. Una caja que se desplaza de izquierda a derecha dando dos giros sobre sí misma.

El código de la @keyframe:

@keyframes girar { 0% { left: 0%; transform: rotate(0deg); } 100% { left: 100%; transform: rotate(720deg); } }

Una breve explicación:
La palabra "girar" es el nombre de la animación y por el que la identificamos para aplicarla al elemento con la clase "rueda1"
En ese ejemplo sólo hemos definido dos frames o pasos intermedios, el inicial (0%) y el final (100%) y en cada uno dos propiedas: la posición inicial y final left:0%/100%) y el números de giros sobre sí misma, 2 (rotate:0deg/720deg).
Podríamos indicar todos los intermedios necesarios para complicarla hasta el infinito y más allá.

Y la forma cómo asignamos esta animación al div usado de ejemplo utilizando la propiedad "animation" de forma acortada o resumida:

.rueda1 { animation: girar 5s infinite; }

El nombre de la animación (girar), el tiempo empleado en cada ciclo de la ainimación (5s) y el número de veces que se repite (infinite).

Si te fijas en el ejemplo anterior, hay un salto brusco cuando termina. Esto me sirve para indicarte otra característica de las @keyframes de css:
No es obligatorio una declaración de tiempos linear, progresiva y creciente.
Fíjate si hacemos lo siguiente en cómo se desarrolla:

@keyframes irYvolver { 0% { left: 0%; transform: rotate(0deg); } 50% { left: 50%; transform: rotate(720deg); } 100% { left: 100%; transform: rotate(0deg); } }

Eso y un pequeño ajuste en la propiedad "animation" para hacerla más fluida:

.rueda2 { animation: irYvolver 10s infinite linear; }

"linear" es uno de los valores admitidos por "animation-timing-function". Ésto es, el cómo se desarrolla la acción, no en la animación completa, sino entre frame y frame que la componen.

La Propiedad animation:

La propiedad "animatión" es la forma resumida de distintas propiedades que se pueden aplicar a las animaciones realizadas con las @keyframes de Css4.

La propiedad ‘animation-name’

Define el nombre dado a la animación y es utilizado en el valor de la @keyframes

Nombre: animation-name
Valor: none | IDENT [, none | IDENT ]
Inicial: ninguno
Se aplica a: elementos "block" y "inline-block"
Se hereda: no
Porcentages: N/A
Media: visual
Valor computado: El mismo que el especificado.

La propiedad ‘animation-duration’

Define el tiempo durante el que se desarrolla un ciclo de la animación.

Nombre: animation-duration
Value: <tiempo> [, <time>]*
Inicial: 0
Se aplica a elementos "block" y "inline-block"
heredado: no
Porcentajes: N/A
Media: visual
Valor computado: El mismo que el declarado.

La propiedad ‘animation-timing-function’

Describe cómo progresa en cada ciclo la animación. La mejor forma de ver qué hace cada valor es probarlos.

Nombre: animation-timing-function
Valor: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
Inicial: ease
Se aplica a: elementos "block" y "inline-block"
Inherited: no
Porcentajes: N/A
Media: visual
Valor computado: El mismo que el declarado.

La propiedad ‘animation-iteration-count’

Esta propiedad define el número de veces (ciclos) que la animación se repite. El valor por defecto es 1. Significa que la animación va una sóla vez desde el inicio hasta el final (0% a 100%). Con el valor "infinite" se repetirá para siempre. Valores negativos son tratados como 0 (cero) y los decimales podrían causar que algunas partes de cada ciclo se parasen. En combinación con ‘animation-direction’ y valor ‘alternate’ hará que en cada ciclo de la animación se alterne el sentido en que se desarrolla.

Nombre: animation-iteration-count
Valor: infinite | <número> [, infinite | <number>]*
Initial: 1
Se aplica a: elementos "block" y "inline-block"
Se hereda: no
Porcentajes: N/A
Media: visual
Valor computado: El declarado.

La propiedad ‘animation-direction’

Define si hay alternancia o no en el sentido en que se desarrollan cada ciclo de la animación. Así, si su valor es "alternate" los ciclos impares se desarrollan en el sentido indicado y los pares lo hacen en sentido contrario.
Así, en el ejemplo primero de este artículo, si declaramos dicho valor (alternate) tendríamos lo siguiente. Observa también el efecto de animation-timing-function: linear en la anterior y en ésta que es el inicial o por defecto "ease".

Nombre: animation-direction
Valor: normal | alternate [, normal | alternate]
Inicial: normal
Se aplica a: elementos "block" y "inline-block"
Se hereda: no
Porcentajes: N/A
Media: visual
Valor computado El mismo que el declarado

La porpiedad ‘animation-play-state’

Pasamos de largo. El consorcio está inclinado a sacarla del borradorEn el último documento del consorcio su estatus ha cambiado:

Define si una animación se está ejecutando o está en pausa. Si al desarrollarse una animación se pausa, se conservará su estado en ese punto hasta reiniciarla, sin retornar al inicio de ella.

Nombre: animation-play-state
Valor: [ running | paused ] [, [ running | paused ] ]*
Inicial: running
Se aplica a: Todos los elementos, :before y :after incluidos.
Se hereda: no
Porcentajes: N/A
Media: visual
Valor computado: El mismo que el declarado.

La propiedad ‘animation-delay’

El valor indicado es el retraso desde que se aplica la animación hasta que esta comienza.
Cero (0) significa que no hay retraso.
Valores negativos están permitidos.

Nombre: animation-delay
Valor: <time> [, <time>]*
Inicial: 0
Se aplica a: elementos "block" y "inline-block"
Se hereda: no
Porcentajes: N/A
Media: visual
Valor computado El mismo que el declarado.

La propiedad 'animation-fill-mode':

Define los valores que se aplican a la animación cuando no se está ejecutando. En una animación los valores de la propiedad no la afectan hasta el momento de ponerse en marcha (definido por delay) al igual que una vez terminada. Esta propiedad (animation-fill-mode) actúa en esos momentos.

Si el valor para animation-fill-mode: backwards la animación se mostrará con el valor definido en la keyframe 0% (o "from") en el entretiempo entre que comienza su ejecución y se pone en marcha (marcado por delay).

Si el valor es forwards aplican los valores definidos en el keyframe final (100% o "to"), excepto si 'animation-direction' es 'alternate' e 'iteration-count' un número finito, en cuyo caso será el keyframe inicial (0%).

Si el valor es both se aplican las dos anteriores. Una al principio y otra al final de cada ciclo.

Name: animation-fill-mode
Value: [ none | forwards | backwards | both ] [, [ none | forwards | backwards | both ] ]*
Initial: none
Applies to: all elements, :before and :after pseudo elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: Same as specified value.

Hay unas cuantas propiedades más

Pero fuera del borrador de trabajo de la W3c y propuestas y sólo soportadas por quien las propone (ejem ejem basadas en webkit eem ejem). Así que no las menciono. Tampoco te será muy difícil encontrarlas.

La propiedad ‘animation’ acortada:

Property Values Initial Applies to Inh. % Media
animation [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]* see individual properties block-level and inline-level elements no N/A visual
animation-delay <time> [, <time>]* 0 block-level and inline-level elements no N/A visual
animation-direction normal | alternate [, normal | alternate]* normal block-level and inline-level elements no N/A visual
>animation-duration <time> [, <time>]* 0 block-level and inline-level elements no N/A visual
animation-iteration-count infinite | <number> [, infinite | <number>]* 1 block-level and inline-level elements no N/A visual
animation-name none | IDENT [, none | IDENT ]* none block-level and inline-level elements no N/A visual
animation-play-state running | paused [, running | paused]* running block-level and inline-level elements no N/A visual
animation-fill-mode [ none | forwards | backwards | both ] [, [ none | forwards | backwards | both ] ]* none all elements, :before and :after pseudo elements no N/A visual
animation-timing-function ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]* ease block-level and inline-level elements no N/A visual

Termino y pregunto

Ves. No es tan complicado ni de entender ni de realizar animaciones con las @keyframes de css. Eso sí, si recien comienzas ve paso a paso y de lo más sencillo a lo más complicado. Es sumamente fácil cometer algún error en la sintaxis y que todo deje de funcionar.
Pero como todo, sólo es cuestión de querer y dedicarle un poquito de tiempo a jugar con el Css.

Posíblemente el ejemplo que más impactó en su momento, pues se aplican las propiedades a imágenes en backgrounds, fuese uno ya veterano: "the walking man", obra de Andrew Hoyer

En estas mismas páginas tienes un cronómetro digital con cuenta real sólo en Css. En este caso la dificultad estriba en lo prolijo y detalle de los distintos frames para ir cambiando las partes de cada dígito qe lo conforma.

Y ahora la pregunta de la discordia:

¿Hasta qué punto las animaciones entran dentro de lo que debería ser el campo de actuación de Css?
Con independencia de que sean o no "prácticas" por el soporte que le dan los navegadores, ¿le corresponde a Css hacer estos efectos o se está metiendo en competencias ajenas?

Un ejemplo del porqué cada día que pasa peor me caen los prefijos privativos

Durante el poco tiempo que lleva este blog son varias las entrdas dedicadas al tema de los prefijos privativos en Css y todo lo que conlleva su existencia y uso.
Pues aquí un claro ejemplo de lo que supone.
Fíjate en el código Css de la primera animación, en la declaración de la @keyframes y su aplicación a .rueda1 y compara con el que código Css que es necesario para hacerlo visible a la mayoría de usuarios de los cuatro principales navegadores. Los 2 que ya le dan soporte y otros 2 más por si acaso un día de estos lo hacen.
Mira bien:

.rueda1 { animation: girar 5s infinite; -moz-animation: girar 5s infinite; /* Firefox */ -webkit-animation: girar 5s infinite; /* Safari and Chrome */ -o-animation: girar 5s infinite; /* para cuando ópera... */ -ms-animation: girar 5s infinite; /* para cuando ie... */ } @keyframes girar { 0% { left: 0%; transform: rotate(0deg); } 100% { left: 100%; transform: rotate(720deg); } } @-moz-keyframes girar { 0% { left: 0%; -moz-transform: rotate(0deg); } 100% { left: 100%; -moz-transform: rotate(720deg); } } @-webkit-keyframes girar { 0% { left: 0%; -webkit-transform: rotate(0deg); } 100% { left: 100%; -webkit-transform: rotate(720deg); } } @-o-keyframes girar { 0% { left: 0%; -o-transform: rotate(0deg); } 100% { left: 100%; -o-transform: rotate(720deg); } } @-ms-keyframes girar { 0% { left: 0%; -ms-transform: rotate(0deg); } 100% { left: 100%; -ms-transform: rotate(720deg); } }

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: 15

  1. Anónimo18/6/12

    la forma en que se declara me recuerda a la orientación a objeto

    ResponderEliminar
  2. Hola kseso?
    Comparto mi primer encuentro con los keyframes:

    http://jsfiddle.net/c2am/na7ew/10/embedded/result/

    Un poco bien y un poco mal.

    Y una consulta ¿es posible un fondo con dos colores, blanco y negro.
    Digo para no tener que agregar un "medio" div negro.

    Saludos

    ResponderEliminar
  3. Gracias por compartir tu trabajo, Cristian.

    Sobre el fondo multicolor, ¿lo intentaste con gradientes css?

    Un saludo

    ResponderEliminar
  4. Muchas gracias, muy bien explicado !!!! me ha servido de mucho para darle vida a la cabecera de mi blog, Saludos !!!

    ResponderEliminar
  5. No me sale :(
    No sé que sucede que agrego el código tal cual a mi css pero no me sale nada...
    Quiero hacérselo a un div, como sería la sintaxis?
    Gracias

    ResponderEliminar
    Respuestas
    1. A falta de información vital en tu pregunta sin la que es imposible una respuesta ad hoc sólo se me ocurre una pregunta:
      ¿has añadido los oportunos prefijos privativos?

      Un saludo

      Eliminar
  6. No me sale :(
    No sé que sucede que agrego el código tal cual a mi css pero no me sale nada...
    Quiero hacérselo a un div, como sería la sintaxis?
    Gracias

    ResponderEliminar
  7. Hola Kseso, estoy intentando hacer un slider que tenga por un lado un fundido a blanco de las imágenes,(que eso ya lo he puesto por transiciones y me funciona) Pero quiero hacer que las imágenes entren por la izquierda y con transiciones, me sale el efecto pero no funciona el cambio de la opacidad con las transiciones, o sea, no se aprecia. Mi pregunta es si puedo hacer los desplazamientos de las imágenes por animaciones con mejor resultado que con transiciones? Y a ser posible me gustaría ver que las imágenes se van por la derecha y al mismo tiempo se van haciendo transparentes.
    Un saludo y muy bueno el contenido de tu blog

    ResponderEliminar
    Respuestas
    1. La diferencia principal entre una propiedad y otra es que con 'transition' una propiedad (o múltiples) pasan del estado (o valor) inicial a uno final en un tiempo dado. Este cambio se produce tras alguna acción (o a la carga inicial).
      'Animation' implica haber declarado antes una animación o keyframes. Y en ella (@keyframes name) se pueden declarar tantos puntos intermedios (x%) con tantas declaraciones (propiedad: valor1...) como sea necesario.

      'Transition' se podría decir que es una 'animation' mínima, donde sólo se declara el keyframe final (100%) y de sólo un ciclo, iniciada generalmente tras alguna acción (un :hover, por ejemplo).

      Así que si quieres tener realmente control sobre ese paso de un valor a otro lo suyo es utilizar 'animation'.

      Un saludo

      Eliminar
    2. Muchas gracias Kseso por tu rápida respuesta. He visto algunos ejemplos de slider por Internet, que ya vienen listos para usar, pero hasta ahora no había entrado a mirarlos en cuanto a código JavaScript y JQuery . Me gustaría saber un poco más de cómo conseguir hacer la implementación de la animación apoyándome en las posibilidades de JQuery, porque de momento necesito hacer un slider, o un carrusell, según vea, y aunque entienda la parte CSS, necesita siempre de ejecutar acciones sobre la animacion, como detenerla, ejecutarla, etc. ¿Has publicado sobre ese tema (javascript y JQuery) también en tu blog? Un saludo
      Jorge

      Eliminar
    3. Pues ya siento ser yo quien te haga ver que si lo que necesitas es ayuda con js o alguna de sus librerías (como jQuery) no soy yo ni este blog el sitio más indicado donde pedirla. Por si no habías reparado en ello.

      Un saludo

      Eliminar
    4. No pasa nada Kseso, ya con lo que he visto y he aprendido en tu blog es para mi de gran ayuda y un gran avance. Me servirá para entender como están hechos muchas animaciones que he visto. Un saludo y muchas gracias por tus rápidas y aclaradoras respuestas.

      Eliminar
  8. Muchas gracias por la expliación.
    Me sucede que con unos iconos me funcionan y con otros no , trabajo en wp, utilizo una plantilla elegant themes, no encuentro la razón.alguna pista? gracias

    ResponderEliminar
  9. estimado los keyframes como lo invoco dentro de html dentro de un div?

    ResponderEliminar
    Respuestas
    1. La animaciones se crean con la regla @keyframes nombre { } y se aplican al elemento mediante la propiedad animation: nombre étc étc;
      Posíblemente el artículo Transition Vs Animation Css te sea de ayuda.

      Si tu pregunta es cómo incluir ambas, la regla @keyframes nombre { } y la propiedad animation, para la segunda de cualquiera de las formas permitidas para incluir Css(1*), incluido el atributo style también conocido como estilos en línea.
      Para la segunda (regla @keyframes) cualquiera menos los estilos en línea ya que hace uso de caracteres no permitidos en el atributo style.
      El artículo CSS Style Atribute te ayudará en este aspecto.

      Un saludo, Luis Enrique.

      1*: formas permitidas:
      Archivo .css externo vinculado
      Elemento <style> tanto en el head como en cualquier parte del body del documento.

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap