Cómo crear animaciones con fotogramas clave

Para crear efectos animados en su sitio web para mostrar en el iPad y el iPhone, es necesario utilizar los fotogramas clave. Más compleja CSS 3 animaciones se basan en los fotogramas clave. Los fotogramas clave son los puntos dentro de una animación donde cambia algo. Cada vez que desee cambiar un objeto animado, es necesario crear un nuevo fotograma clave.

Por ejemplo, si usted desea animar una pelota que rebota, como se muestra en esta figura, es necesario tener un fotograma clave en la parte superior del rebote y otro en la parte inferior del rebote.

En este ejemplo, la pelota es de 50 píxeles de diámetro y el contenedor de la pelota es de 350 píxeles de alto. El primer fotograma clave, por lo tanto, coloca el balón en la parte inferior del recipiente, y el último lo coloca en la parte superior del recipiente.

Aquí está el código que hace que este trabajo:

@ -webkit-fotogramas clave rebotan desde {{margin: 300px auto 0-} a {margin: 0 auto 0-}}

Un @ -webkit-fotogramas clave bloque contiene reglas que definen cada fotograma clave. Un fotograma clave define el estilo de ese momento dentro de la animación. Usted puede tener un comienzo y un final, como en el ejemplo que se muestra aquí, o puede definir cualquier número de puntos en el medio. Algunos navegadores aplican este estilo con más facilidad que otros, pero Safari en el iPhone y el iPad hacen este trabajo bastante bien.

En este sencillo ejemplo pelota que rebota, una animación llamada bote se define para tener dos fotogramas clave: uno para el inicio de la animación (la de bloque) y otro para el extremo (la a bloque). Estos dos fotogramas clave mueven la pelota de el fondo a la parte superior.

Al definir una animación con un conjunto de fotogramas clave, puede utilizar el siguiente webkit-animación propiedades:

• animación nombre - define la animación utilizada. Apunte a bote, el conjunto de fotogramas clave definido antes. Si el nombre no se encuentra (que le falta o mal escrito), el navegador asume el valor predeterminado de ninguno y sin animación se produce:

  -webkit-animación-name: bounce-

• animación duración - define la longitud de la animación. El formato de valor de tiempo es un número seguido de un identificador de unidad de tiempo. Los identificadores de unidades de tiempo son Sra de milisegundos y s para los segundos (1000 ms, 1s). La animación de la pelota que rebota dura un segundo.

  La figura ilustra cómo el navegador crea automáticamente el interpolada marcos - los fotogramas entre la parte superior e inferior. Se define el inicio y el final y el navegador se llena en lo que es " estar en-tween."

  webkit-animación-duración: 1S-

• animación iteración recuento - define el número de veces que se reproduce un ciclo de animación. El valor por defecto es 1, y ese valor hace que el juego de animación de principio a fin de una vez. Un valor de infinito hace que la animación se repita siempre. Como se puede adivinar en base a esa información, en el siguiente ejemplo, la animación juega diez veces:

  -webkit-animación-iteración cargos: 10-

• animación de dirección - define si la animación debe jugar a la inversa cualquier otro ciclo. Si suplente es especificado, cada dos ciclos de animación se reproduce en la dirección inversa. Cuando se reproduce una animación a la inversa, las funciones de temporización también se invierten.

  Es por esto que es necesario definir la pelota, ya que sólo rebotando hacia arriba. La animación alternativo se juega a la inversa, con lo que el balón hacia atrás hasta la parte inferior de la caja (no muy diferente de la gravedad).

-webkit-animación-dirección: alternate-

Poner todo junto y la regla de estilo que hace que el trabajo de animación rebotando pelota se ve así:

#animationDemo #ball {-webkit-animación-name: rebote - webkit-animación-duración: 1s - webkit-animación-iteración recuento: 10 - webkit-animación-dirección: alternate-}

Al entrar en una o más propiedades, asegúrese de seguir este orden:

1. transición de la propiedad

2. duración de la transición

3. transición-timing-function

4. transición de retardo

Utilice la siguiente declaración para la demostración de pelota rebotando:

#animationDemo #ball {rebote 1s 10 alternate-}

Para obtener una lista completa de las propiedades CSS se puede animar mediante el uso de transiciones, visite Nivel Módulo Transiciones CSS 3.