Cómo utilizar animaciones CSS3

los transformar comportamiento está muy bien, pero CSS3 promete una forma aún más emocionante de la animación llamada (esperar a que) Animación mecanismo. Aquí es una animación de un cuadro en movimiento alrededor de la pantalla.

Aquí está la estrategia básica para la construcción de una animación CSS:

1. Generar un conjunto de fotogramas clave.

   Las animaciones se basan en la noción de fotogramas clave. Cada fotograma clave especifica el estado de un objeto, y el navegador intenta una transición suave entre los fotogramas clave.

2. Proporcionar un porcentaje para cada fotograma clave.

   El fotograma clave empieza con un porcentaje, lo que indica donde en la animación fotograma clave va a suceder. El primer fotograma clave debe ser 0% (el comienzo de la animación) y el último debe ser 100% (al final de la animación). Puede indicar el mayor número de fotogramas clave intermedios como desee.

3. Añadir una hoja de estilo de mini para cada fotograma clave.

   Coloca los estilos que desea modificados en una hoja de estilos poco. En el lugar indicado en la línea de tiempo, un elemento siguiendo esta animación mostrará el comportamiento determinado estilo. Usted puede colocar cualquier información de estilo que usted quiere aquí.

4. Aplicar la animación a sus elementos.

   los animación regla le permite aplicar un fotograma clave a un elemento. Puede volver a utilizar los mismos fotogramas clave entre muchos elementos diferentes, si quieres.

5. Modificar la animación.

   Puede aplicar muchas de las mismas características a una animación como lo hace una transición. Hay una serie de parámetros, pero los elementos más utilizados son fotogramas clave, el tiempo y la repetición.

Echa un vistazo al código para animation.html para ver todo en la acción:

   
Cuadro en movimiento

Hay una serie de cosas a tener en cuenta sobre este ejemplo:

• Cree un conjunto de fotogramas clave llamada los keyframes regla se utiliza para crear un recurso de nivel de página que se puede utilizar en el resto de la CSS. En este caso, se utiliza para generar un conjunto de fotogramas clave.

• Construir versiones específicas del navegador: Por desgracia, el mecanismo de animación aún requiere prefijos específicas del navegador. Por lo general es más fácil de apuntar un navegador y luego copiar de los otros navegadores cuando el comportamiento básico está funcionando.

• En este ejemplo se mueve un elemento en un patrón cuadrado: Para este ejemplo particular, una div se moverá en un movimiento cuadrado. Como te ves en los fotogramas clave, verás que un simple cambio en la posición izquierda y superior de la div se hizo a través del tiempo.

• Hacer comienzo y al final del mismo: Si va a ejecutar esta animación continua, desea que el principio y el final lugares a ser el mismo.

• Aplique la anim fotograma clave se establece en el elemento: Aplique la anim fotograma clave establece mediante la animación gobernar.

• Indique la duración de la animación: Las animaciones son acerca de cambios en el tiempo, por lo que el animación tag también requiere una duración, medida en segundos (s) o milisegundos (ms).

• Determinar la flexibilización: Flexibilización es la forma en la animación actúa al principio y al final de un segmento de animación. los lineal regla utilizada aquí mantiene la animación a una velocidad constante. También puede utilizar (el comportamiento predeterminado) facilidad in-out para hacer que el elemento de movimiento a una velocidad variable.

• Determinar el número de repeticiones: Se puede especificar un número de veces que se repite la animación. Si deja esta parte fuera, la animación va a ocurrir sólo una vez cuando la página se carga por primera. Puede especificar infinita para que la repetición de la animación, siempre y cuando la página está en memoria.

Tenga en cuenta que hay muchos otros parámetros que puede establecer, por ejemplo, aliviando y retraso. Estos se pueden establecer a través de la animación regla o con las normas individuales. Por ahora, es posible que desee mantener sus animaciones tan simple como sea posible, al menos hasta que los navegadores pueden gestionar todas las animaciones sin prefijos de proveedores.