Sintaxe de @keyframes e Propriedade de Animação

As animações CSS permitem alterar propriedades em várias etapas ao longo do tempo usando @keyframes. Ao contrário das transições, as animações começam automaticamente ou quando uma classe é adicionada e aceitam sequências complexas.

Defina as etapas da animação usando porcentagens (0% a 100%) ou as palavras-chave from/to:

Aplique uma animação a um elemento usando a abreviação animation ou suas subpropriedades:

Faz referência à regra @keyframes pelo nome:

Define quanto tempo leva um ciclo da animação:

Use quadros-chave percentuais para animações complexas com várias etapas:

Cada etapa de quadro-chave pode animar várias propriedades simultaneamente:

A função de temporização pode ser definida para cada etapa de quadro-chave, controlando a suavização entre pontos de referência individuais em vez de controlar a animação inteira.

Aplique várias animações a um elemento usando valores separados por vírgulas:

Pause e retome as animações dinamicamente:

Escolha com cuidado:

• Transição: dois estados, acionada por uma alteração de estado, simples
• Animação: várias etapas, inicia sozinha, repete-se e oferece mais controle

Qual palavra-chave de @keyframes representa o estado inicial da animação?

Defina as etapas da animação com @keyframes usando pontos de referência from/to ou percentuais. Aplique-as com a abreviação animation, especificando nome, duração, temporização e modo de preenchimento. Separe várias animações por vírgulas. Use transições para alterações simples entre dois estados e animações para sequências complexas.