Las propiedades de animación más utilizadas son las siguientes:
1. nombre-animación
El atributo de nombre de animación debe existir, porque el valor de nombre de animación no es ninguno de forma predeterminada, y no hay animación.
2. duración de la animación (tiempo requerido para que la animación se ejecute una vez)
El atributo de duración de animación también debe existir, porque el valor de duración de animación es 0 por defecto, y no hay animación.
3. animación-retraso (el tiempo de retraso de la animación antes del inicio)
El valor del retraso de animación puede ser segundos (s) o milisegundos (ms), el valor predeterminado es 0, sin retraso.
4. animación-sincronización-función (la pista de la animación para completar un ciclo)
El valor de la función de sincronización de animación es una curva de Bezier, el valor predeterminado es facilidad, lo que significa que la animación comienza a baja velocidad, luego se acelera y finalmente se ralentiza antes de terminar. Los valores más utilizados son los siguientes:
(1) lineal: indica que la velocidad de la animación es la misma de principio a fin.
(2) facilidad: indica que la animación comienza a baja velocidad.
(3) facilidad: indica que la animación termina a baja velocidad.
(4) facilidad de entrada: indica que la animación comienza y termina a baja velocidad.
Si no desea utilizar ningún valor, también puede utilizar la función Bessel cúbica directamente. El sitio web es http://cubic-bezier.com, puede depurar directamente el valor que desee; también puede depurar directamente en el navegador, ahora La depuración visual de las funciones de Bessel es compatible con las herramientas de depuración del navegador.
5. recuento-iteración-animación (número de reproducciones de animación)
Hay dos tipos de valores de propiedad de animación-iteración-conteo:
(1) Escriba números directamente y personalice la cantidad de veces que desea reproducir la animación.
(2) infinito: configura la animación para que se repita de forma inalámbrica.
6. modo de relleno de animación (defina el estilo del elemento después de que la animación del elemento finalice o no comience)
El valor predeterminado es none, lo que indica que el elemento no tendrá estilo cuando la animación finalice o no comience
Los valores de atributos comunes son:
(1) hacia adelante: una vez que finaliza la animación, el elemento utiliza directamente el estilo actual.
(2) hacia atrás: indica que el elemento de tiempo de retardo de animación utiliza el valor del atributo from o el valor del atributo en el cuadro clave (cuando la dirección de la animación es inversa o alternativa inversa)
7. dirección de animación (si reproducir animación en reversa)
El valor predeterminado es normal y la animación se reproduce normalmente. Si la animación se reproduce solo una vez, este atributo no tiene efecto.
Los valores de atributo más utilizados son:
(1) reversa: indica que la animación se reproduce en reversa.
(2) alternativa: indica que la animación se reproduce en dirección hacia adelante cuando se reproduce un número impar de veces y en dirección inversa cuando se reproduce de manera uniforme.
(3) alternate-reverse :: indica que la animación se reproduce en reversa cuando se reproduce un número impar de veces, y se reproduce hacia adelante cuando se reproduce una cantidad par de veces.
Las propiedades de animación generalmente se combinan al escribir, a menos que el valor de la propiedad deba establecerse por separado La forma abreviada de la propiedad de animación es: animación: código 2s 2s lineal infinito alternativo hacia adelante;
