Tabla de contenido
1. nombre de animación: especifique el nombre del fotograma clave que se vinculará al selector.
3. función de sincronización de animación: especifique cómo la animación completará un ciclo.
4. retardo de animación: define cuándo comienza la animación.
5. animación-iteración-recuento: define cuántas veces se debe reproducir la animación.
6. dirección de animación: define si se reproducirá la animación en un bucle y a la inversa.
8. animación-play-state: especifica si la animación se está ejecutando o en pausa.
9、animación: nombre duración tiempo-función retardo iteración-cuenta dirección modo de llenado;
1. nombre de animación: especifique el nombre del fotograma clave que se vinculará al selector.
Al configurar estilos en CSS, usamos @keyframes+nombre de animación para definir las reglas de animación, de la siguiente manera.
Después de definirlo, debemos usar nombre-animación: nombre de la animación; para hacer referencia a esta regla de animación.
@keyframes run3 {
0% {
transform: translatex(0px);
}
25%{
transform: translate(300px,300px);
}
50% {
transform: translate(600px,-100px);
}
75%{
transform: translate(900px,300px);
}
100% {
transform: translate(0px,0px);
}
2. duración de la animación: define cuántos segundos o milisegundos tarda la animación en completar un ciclo.
duración de la animación: 1s; significa que la animación debe completarse en 1s. Se pueden configurar milisegundos, 1 s = 1000 ms;
3. función de sincronización de animación: especifique cómo la animación completará un ciclo.
Cómo completar un ciclo de animación significa que la velocidad de completar un ciclo de animación es una animación de velocidad constante o una animación de velocidad variable. Por ejemplo, el atributo lineal significa que la animación se completa a una velocidad constante.
El atributo de facilidad es el atributo predeterminado: comienza a baja velocidad y aumenta gradualmente la velocidad, luego disminuye la velocidad al final.
La animación de entrada gradual comienza a baja velocidad y la animación de salida finaliza a baja velocidad.
La animación de entrada y salida comienza y termina a baja velocidad.
El atributo pasos (int, inicio | fin) es especial y no se explicará aquí.
4. retardo de animación: define cuándo comienza la animación.
La unidad puede ser segundos (s) o milisegundos (ms).
2s significa que la animación espera 2s antes de comenzar.
La unidad puede ser un valor negativo: -2s significa que cuando se abre la página, la animación se ha ejecutado durante 2 segundos y ahora la animación ha alcanzado el tiempo de ejecución de 2 segundos.
Puede utilizar este atributo para mostrar varias animaciones una tras otra para crear algunas animaciones especiales. También puede establecer un valor negativo para que la animación ya haya comenzado cuando se abre la página.
5. animación-iteración-recuento: define cuántas veces se debe reproducir la animación.
n Un número entero positivo que define cuántas veces se debe reproducir la animación.
infinito especifica que la animación siempre se reproducirá y se repetirá.
6. dirección de animación: define si se reproducirá la animación en un bucle y a la inversa.
valor predeterminado normal. La animación se reproduce normalmente.
la animación inversa se reproduce al revés.
La animación alternativa se reproduce hacia adelante en números impares (1, 3, 5...) y hacia atrás en números pares (2, 4, 6...).
La animación alternativa-inversa se reproduce en dirección inversa en los momentos impares (1, 3, 5...) y en dirección directa en los momentos pares (2, 4, 6...)
7. modo de relleno de animación: especifica el estilo que se aplicará al elemento cuando la animación no se reproduce (cuando se completa la animación o cuando la animación tiene un retraso y no comienza a reproducirse).
Ambas animaciones siguen las reglas de avance y retroceso. Es decir, la animación expande la propiedad de la animación en ambas direcciones.
forwards La animación aplicará este valor de propiedad después de que finalice la animación (determinado por el recuento de iteraciones de animación).
Una animación hacia atrás aplicará el valor de propiedad definido en el fotograma clave que inició la primera iteración de la animación durante la definición del retraso de la animación. Estos son valores en el fotograma clave desde (cuando la dirección de la animación es "normal" o "alternativa") o en el fotograma clave hasta (cuando la dirección de la animación es "inversa" o "inversa-alternativa").
Si configuramos el atributo de retardo de animación para la animación, si es 2 segundos, la animación no comenzará a reproducirse hasta 2 segundos después de que se abra la página. Durante estos 2 segundos, configuramos el estilo del elemento animado y el estilo del elemento después la animación termina. ¿Cómo debería verse? , que se establece usando esta propiedad.
8. animación-play-state: especifica si la animación se está ejecutando o en pausa.
pausado especifica pausar la animación
running especifica la animación que se está ejecutando,
Puede utilizar este atributo para pausar la animación cuando pasa el mouse sobre ella.
.wai:hover{
animation-play-state: paused;
}
Como se muestra en la figura, cuando el cursor del mouse apunta a la animación, la animación se pausa.
9、animación: nombre duración tiempo-función retardo iteración-cuenta dirección modo de llenado;
Generalmente, es más conveniente escribir todos los atributos anteriores en una línea y separarlos con espacios.
Pero tenga en cuenta que si desea establecer algunas propiedades por separado, debe colocar las propiedades establecidas por separado debajo de este código para evitar que se sobrescriban.