As propriedades de animação mais usadas são as seguintes:
1. nome da animação
O atributo nome da animação deve existir, porque o valor do nome da animação é nenhum por padrão e não há animação.
2. duração da animação (tempo necessário para a animação ser executada uma vez)
O atributo animation-duration também deve existir, porque o valor de animation-duration é 0 por padrão e não há animação.
3. Atraso na animação (o tempo de atraso da animação antes do início)
O valor do atraso da animação pode ser segundos ou milissegundos (ms), o valor padrão é 0, sem atraso.
4. função de tempo de animação (a pista de corrida da animação para completar um ciclo)
O valor da função de tempo de animação é uma curva de Bezier, o valor padrão é a facilidade, o que significa que a animação inicia em baixa velocidade, depois acelera e, finalmente, diminui a velocidade antes de terminar. Os valores mais usados são os seguintes:
(1) linear: indica que a velocidade da animação é a mesma do começo ao fim.
(2) facilidade de entrada: indica que a animação começa em baixa velocidade.
(3) facilidade: indica que a animação termina em baixa velocidade.
(4) facilidade de entrada: indica que a animação inicia e termina em baixa velocidade.
Se não houver valor que você queira usar, também poderá usar diretamente a função cúbica de Bessel.O site é http://cubic-bezier.com, você pode depurar diretamente o valor desejado; também pode depurar diretamente no navegador, agora A depuração visual das funções do Bessel é suportada nas ferramentas de depuração do navegador.
5. contagem de iterações de animação (número de execuções de animação)
Existem dois tipos de valores de propriedade animation-iteration-count:
(1) Escreva números diretamente e personalize o número de vezes que deseja reproduzir a animação.
(2) infinito: defina a animação para repetir sem fio.
6. modo de preenchimento de animação (defina o estilo do elemento após a animação do elemento terminar ou não iniciar)
O valor padrão é none, o que indica que o elemento não será estilizado quando a animação terminar ou não iniciar
Os valores de atributos comuns são:
(1) para frente: após o término da animação, o elemento usa diretamente o estilo atual.
(2) para trás: indica que o elemento de tempo de atraso da animação usa o valor do atributo from ou para o valor do atributo no quadro-chave (quando a direção da animação é reversa ou reversa alternativa)
7. direção da animação (se você deseja reproduzir animação ao contrário)
O valor padrão é normal e a animação é reproduzida normalmente. Se a animação for reproduzida apenas uma vez, esse atributo não terá efeito.
Os valores de atributo comumente usados são:
(1) inverter: indica que a animação é reproduzida em reverso.
(2) alternativo: indica que a animação é reproduzida na direção direta quando é reproduzida um número ímpar de vezes e na direção reversa quando é reproduzida uniformemente.
(3) alternate-reverse :: indica que a animação é reproduzida ao contrário quando é reproduzida um número ímpar de vezes e é reproduzida no sentido direto quando é reproduzida um número par de vezes.
As propriedades de animação geralmente são combinadas durante a gravação, a menos que o valor da propriedade precise ser definido separadamente.A forma abreviada da propriedade de animação é: animação: código 2s 2s linear infinito alternativo para a frente;
