Cómo utilizar animaciones css3
Video: Curso de CSS3 - 10 - Animaciones con css3 en html5
los transformar el comportamiento es bastante bueno, pero CSS3 promete una forma aún más emocionante de la animación llamada (esperar a que se) 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:
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.
Proporcionar un porcentaje para cada fotograma clave.
El fotograma clave empieza con un porcentaje, que indica dónde 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 de 100% (el final de la animación). Puede indicar tantos fotogramas clave intermedios como desee.
Añadir una hoja de estilo Mini para cada fotograma clave.
Video: Banner animado con HTML y CSS
Colocar cualquier estilo que desea modificar de 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. Se puede colocar cualquier información de estilo que usted quiere aquí.
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 lo desea.
Modificar la animación.
Video: Curso en español de animación en CSS3 - Rotaciones 3D - HTML5 - principiantes - Aprende desde cero
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 de fotogramas clave, el tiempo, y repetir.
Tome un vistazo al código de animation.html a ver todo en acción:
animation.html caja móvil
Hay una serie de cosas a tener en cuenta sobre este ejemplo:
Crear un conjunto de fotogramas clave llamada los @keyframes regla se utiliza para crear un recurso a 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 todavía requiere prefijos específicos del navegador. Por lo general es más fácil de apuntar a un navegador y luego copiar de los otros navegadores cuando el comportamiento básico está trabajando.
Este ejemplo se mueve un elemento en un patrón cuadrado: Para este ejemplo particular, una div se moverá en un movimiento cuadrado. A medida que nos fijamos en los fotogramas clave, verá que un simple cambio en la posición izquierda y superior de la div se hizo a través del tiempo.
Hacer principio y al final del mismo: Si va a ejecutar esta animación de forma continua, desea que el comienzo y el final lugares a ser el mismo.
Aplica el anim fotograma clave se establece en el elemento: Aplica el anim fotograma clave establece mediante la animación regla.
Indicar la longitud de la animación: Las animaciones son acerca de cambios en el tiempo, por lo que la animación etiqueta 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 norma que se utiliza aquí mantiene la animación a una velocidad constante. También puede utilizar (el comportamiento predeterminado) la facilidad de entrada-salida para hacer el movimiento de los elementos a tasa 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 cabo, la animación va a ocurrir sólo una vez cuando la página se carga por primera. Puede especificar infinita para hacer la repetición de la animación, siempre y cuando la página está en la memoria.
Tenga en cuenta que hay muchos otros parámetros que se pueden establecer, como aliviando y retrasar. Estos se pueden establecer a través de la animación regla o las reglas individuales. Por ahora, es posible que desee mantener sus animaciones tan simple como sea posible, al menos hasta que los navegadores pueden manejar todas las animaciones sin prefijos de proveedores.