soy Kseso y esto EsCSS

@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); } }

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