animaciones CSS3
A completas animaciones CSS consta de dos partes
- Un conjunto definido de fotogramas clave de animación: @keyframes reglas
- Descripción de la declaración de la animación CSS: las propiedades de animación
1. Reglas @ fotogramas clave
Para crear animaciones con CSS3 en reglas @keyframes, fotogramas clave pueden establecer varios fotogramas clave, cada una animación de fotogramas clave representa un estado en el proceso, se puede hacer la animación de fotogramas clave múltiple es muy brillante.
(1) básico sintaxis:
@keyframes animationname{
keyframes-selector{css-style;}
}
(2) subatributos explican:
- animationname: animación representa el nombre actual, que servirá como identificación única cuando las referencias no pueden estar vacíos
- fotogramas clave-selector: selector es un fotograma clave, es decir, para especificar el fotograma clave actual a ser aplicado a todo el valor de posición proceso de animación puede ser un porcentaje, a partir de o para. Que, desde el mismo efecto y 0% representa la animación comenzó, en el mismo sentido y 100% indica el final de la animación.
- CSS-: estilos correspondientes a la trama clave actual se define cuando el estado de ejecución de la animación
de estos tres atributos son esenciales e indispensables
propiedad 2.animation
atributos de animación utilizadas para describir las declaraciones de animación CSS, incluida la designación de la específica y la animación de largo y el comportamiento de animación.
(1) La sintaxis básica:
animation： name duration timing-function delay iteration-count direction fill-mode play-state；
(2) subatributos explican:
| propiedad | descripción |
|---|---|
| animación-nombre | En él se especifica el nombre de la animación @keyframes. |
| duración de la animación | Animación completar un determinado periodo de tiempo. El valor por el valor temporal |
| animación-timing-function | disposiciones de la curva de velocidad de la animación, con el valor de transición similar |
| animación de retardo | El retraso antes del inicio de las disposiciones de la animación, el valor es el valor del tiempo |
| animación-iteración de conteo | Provisiones Las animaciones se reproducen. n: Personalizar animación Vistas de valores; infinita: las disposiciones de la animación deben jugar ilimitada |
| animación-dirección | Si las disposiciones de la animación inversa juegan en el siguiente ciclo. normal: valor predeterminado, la reproducción normal; alternativa: girar la animación de reproducción inversa |
| fill-mode animación- | Animación disposiciones antes o después de la obra, su animación es visible. Ninguno: no cambia el comportamiento predeterminado; delanteros: Cuando la animación se ha completado, la última celebración de un valor de atributo; al revés: el valor de la animación de retardo dentro de un período determinado de tiempo antes de que la pantalla de animación propiedad de inicio de la aplicación, ambos: el avance y retroceso se aplican patrones de relleno |
| animación-play-Estado | Si las disposiciones de la animación se está ejecutando o en pausa. En pausa: Animación disposiciones han sido suspendidas; ejecutando: el valor por defecto, las disposiciones de la animación se está reproduciendo |
