Tutorial de Animações CSS: Guia Completo para Iniciantes

Este é um guia de sintaxe completo e um tutorial interativo de animações CSS para iniciantes. Use-o como referência para aprender as diferentes partes da especificação de animações CSS.

O desempenho do navegador percorreu um longo caminho nos últimos 10 anos. Costumava ser muito mais desafiador adicionar animações interativas a páginas da Web devido ao potencial de problemas de renderização e desempenho. Mas hoje em dia, as animações CSS podem ser usadas com muito mais liberdade e a sintaxe geralmente é muito mais fácil de aprender em comparação com recursos CSS como grade ou flexbox.

Existem diferentes recursos que fazem parte da especificação de animação CSS do W3C. Alguns mais fáceis de usar do que outros. Este tutorial de animações de quadro-chave CSS passará por toda a sintaxe, incluindo cada uma das diferentes propriedades. Incluirei demonstrações interativas para ajudá-lo a entender o que é possível com animações CSS.

A sintaxe @keyframes

Cada animação CSS tem duas partes: Uma ou mais propriedades animation-* junto com um conjunto de quadros-chave de animação que são definidos usando a regra @keyframes . Vamos dar uma olhada em detalhes no que é necessário para construir um conjunto de regras @keyframes .

A sintaxe fica assim:

 @keyframes moveObject 0% transform: translateX(0); 50% transform: translateX(300px); 100% transform: translateX(300px) scale(1.5);

Conforme mostrado aqui, a regra @keyframes inclui três partes básicas:

• A regra @keyframes seguida por um nome de animação personalizado
• Um conjunto de chaves envolvendo todos os quadros-chave
• Um ou mais quadros-chave, cada um com uma porcentagem seguida por um conjunto de regras entre chaves

Neste primeiro exemplo do nosso tutorial de animações CSS, defini minha animação com o nome moveObject . Pode ser qualquer nome que eu quiser, diferencia maiúsculas de minúsculas e deve obedecer às regras de identificador personalizado em CSS. Esse nome personalizado deve corresponder ao nome usado na propriedade animation-name (discutida posteriormente).

No meu exemplo, você notará que usei porcentagens para definir cada um dos quadros-chave na minha animação. Se minha animação incluir quadros-chave iguais a 0% e 100% , posso usar alternativamente as palavras-chave from e to :

 @keyframes moveObject from transform: translateX(0); 50% transform: translateX(300px); to transform: translateX(300px) scale(1.5);

O seguinte CodePen interativo usa a sintaxe acima em um exemplo ao vivo:

Na demonstração, incluí um botão que redefine a animação. Vou explicar mais tarde por que isso é necessário. Mas, por enquanto, saiba apenas que essa animação inclui três quadros-chave que representam etapas nessa sequência de animação: o início, a etapa de 50% e o fim (ou seja, 0%, 50% e 100%). Cada um deles usa o que é chamado de seletor de quadro-chave junto com chaves para definir as propriedades nessa etapa.

Algumas coisas a serem observadas sobre a sintaxe @keyframes :

• Você pode colocar os conjuntos de regras de quadro-chave em qualquer ordem que desejar, e o navegador ainda os executará na ordem determinada por sua porcentagem
• Você pode omitir os quadros-chave de 0% e 100% e o navegador os determinará automaticamente pelos estilos existentes no elemento que está sendo animado
• Se houver quadros-chave duplicados com conjuntos de regras diferentes (por exemplo, dois quadros-chave para 20% com um valor de transformação diferente), o navegador usará o último
• Você pode definir vários quadros-chave em um único seletor de quadro-chave com uma vírgula: 10%, 30% ...
• A palavra-chave !important anula qualquer valor de propriedade, portanto, não deve ser usada em uma propriedade dentro de um conjunto de regras de quadro-chave

Agora que você tem um bom entendimento da sintaxe @keyframes neste tutorial de animação CSS, vamos dar uma olhada nas diferentes propriedades de animação que são definidas no elemento que está sendo animado.

As propriedades de animação que vamos abordar:

A propriedade nome da animação

Como mencionado, toda animação CSS que você cria precisa ter um nome que apareça na sintaxe @keyframes . Este nome deve ser o mesmo nome definido usando a propriedade animation-name .

Usando o CSS da demonstração anterior, a sintaxe se parece com isso:

 .box animation-name: moveObject;

Novamente, o nome personalizado que defini também deve existir como um nome para uma regra @keyframes — caso contrário, esse nome não fará nada. Você pode pensar nisso como uma chamada de função em JavaScript. A função em si seria a parte @keyframes moveObject do código, enquanto a chamada de função é animation-name: moveObject .

Algumas coisas a ter em mente sobre animation-name :

• O valor inicial para animation-name é none , o que significa que nenhum quadro-chave está ativo. Isso pode ser usado como uma espécie de 'alternância' para desativar uma animação.
• O nome escolhido diferencia maiúsculas de minúsculas e pode incluir letras, números, sublinhados e hífens.
• O primeiro caractere no nome deve ser uma letra ou um hífen, mas apenas um único hífen.
• O nome não pode ser uma palavra reservada como unset , initial ou inherit .

A propriedade de duração da animação

A propriedade animation-duration , sem surpresa, define a quantidade de tempo que uma animação leva para ser executada uma vez do início ao fim. Esse valor pode ser especificado em segundos ou milissegundos, conforme mostrado abaixo:

 .box animation-duration: 2s;

O acima seria o equivalente ao seguinte:

 .box animation-duration: 2000ms;

Você pode ver a propriedade animation-duration em ação na demonstração do CodePen a seguir. Nesta demonstração, você pode escolher quanto tempo deseja que a animação dure. Tente inserir vários valores em segundos ou milissegundos e, em seguida, use o botão “Animar a caixa” para executar a animação.

Se você usar um número pequeno junto com ms para a unidade, talvez nem perceba nenhum movimento. Tente definir um número mais alto se estiver usando milissegundos.

Algumas notas sobre o uso animation-duration :

• Os valores negativos são inválidos
• A unidade deve ser incluída, mesmo que a duração seja definida como 0s (o valor inicial)
• Você pode usar valores fracionários (por exemplo, 0.8s )

A propriedade da função de tempo de animação

A animation-timing-function , que não é tão óbvia em seu significado quanto as duas propriedades anteriores, é usada para definir a maneira pela qual a animação CSS progride. Essa pode não ser a explicação mais clara, mas a sintaxe pode ajudar a esclarecer.

A declaração fica assim:

 .box animation-timing-function: linear;

Esta propriedade aceita os seguintes valores de palavra-chave:

• ease (o valor inicial)
• ease-in
• ease-out
• ease-in-out
• linear
• step-start
• step-end

A maioria dos valores é relativamente fácil de entender por seus nomes, mas você pode ver como eles diferem usando a seguinte demonstração interativa:

Use a entrada select para escolher um dos sete valores de palavra-chave. Observe que os valores ease-* 'facilitam' a animação de várias maneiras. Um valor linear é consistente em todo o caminho.

A propriedade animation-timing-function também aceita as seguintes funções:

• cubic-bezier() – Aceita como argumentos quatro valores numéricos, separados por vírgulas
• steps() – Aceita como argumentos dois valores, um número e um “termo de salto”, separados por vírgula

Os valores das palavras-chave step-start e step-end são equivalentes aos valores step steps(1, jump-start) e steps(1, jump-end) , respectivamente.

Quanto ao cubic-bezier() , a demonstração interativa a seguir pode ajudá-lo a entender um pouco melhor a função:

Observe que a demonstração permite definir os quatro argumentos na função cubic-bezier() . Dois dos argumentos podem ser negativos e dois são limitados a valores decimais entre 0 e 1. Para uma explicação decente de como esses tipos de funções de tempo funcionam, você pode conferir este artigo ou esta ferramenta interativa.

A função steps() , por outro lado, aceita dois argumentos:

• Um inteiro representando “paradas” iguais ao longo de um único ciclo da animação.
• Uma palavra-chave opcional chamada “jumpterm” que determina se a animação “mantém” em intervalos específicos

Novamente, uma demonstração interativa deve ajudá-lo a entender como esses termos de salto funcionam:

Tente selecionar um inteiro junto com um jumpterm (ou tente sem jumpterm) para ver como as diferentes palavras-chave diferem com diferentes valores inteiros. Aparentemente inteiros negativos são permitidos, mas não vejo nenhuma diferença entre 0 e qualquer valor negativo.

A propriedade animation-iteration-count

Em alguns casos, você ficará feliz se uma animação for executada uma vez, mas às vezes você deseja que uma animação seja executada várias vezes. A propriedade animation-iteration-count permite que você faça isso aceitando um número positivo que representa o número de vezes que você deseja que a animação seja executada:

 .box animation-iteration-count: 3;

O valor inicial para animation-iteration-count é 1 , mas você também pode usar a palavra-chave infinite (autoexplicativa) ou usar um valor fracionário. Um valor fracionário executará a animação no meio da execução fracionária:

 .box animation-iteration-count: 3.5;

O código acima percorre a animação três vezes e meia. Ou seja, três iterações completas seguidas por uma iteração final que para exatamente na metade.

Essa propriedade é mais útil quando usada em conjunto com a propriedade animation-direction (discutida a seguir), porque uma animação que é executada apenas desde o início não é extremamente útil se for executada mais de uma vez.

Você pode experimentar a demonstração abaixo, que permite selecionar um valor fracionário para a contagem de iteração, para que você possa ver o efeito:

A propriedade de direção de animação

Como mencionado acima neste tutorial de animações CSS, a propriedade animation-direction funciona bem em conjunto com animation-iteration-count . A propriedade animation-direction permite definir em qual direção você deseja que a animação seja reproduzida. A sintaxe fica assim:

 .box animation-direction: alternate;

Você pode definir o valor como uma das quatro palavras-chave:

• normal – A animação avança na primeira iteração (o padrão)
• reverse – A animação é reproduzida para trás na primeira iteração
• alternate – A animação avança na primeira iteração e alterna nas iterações subsequentes
• alternate-reverse – O mesmo que alternate , mas é reproduzido de trás para frente na primeira iteração

Você pode experimentar os diferentes valores com diferentes contagens de iteração usando a demonstração interativa abaixo:

A propriedade animation-play-state

A propriedade animation-play-state não é extremamente útil em um ambiente CSS estático, mas pode ser útil ao escrever animações interativas via JavaScript ou mesmo CSS.

Esta propriedade aceita dois valores: running ou paused :

 .box animation-direction: paused;

Por padrão, qualquer animação está no estado “em execução”. Mas você pode usar JavaScript para alternar o valor da propriedade. Você pode até mesmo usar um recurso CSS interativo como :hover ou :focus para alterar a animação para um estado “pausado”, que essencialmente congela a animação onde quer que esteja na iteração atual.

A demonstração interativa abaixo tem uma animação rodando infinitamente com dois botões para “pausar” e “retomar” a animação.

A propriedade de atraso de animação

Algumas animações são projetadas para começar a animar imediatamente, enquanto outras podem se beneficiar de um pequeno atraso antes da primeira iteração. A propriedade animation-delay permite que você faça isso.

 .box animation-delay: 4s;

Como outros valores baseados em tempo, você pode definir o animation-delay para um valor usando segundos ou milissegundos. Você também pode usar valores fracionários.

É importante observar que o atraso ocorre apenas na primeira iteração, não em cada iteração. Você pode experimentar isso usando a demonstração interativa abaixo:

A demonstração oferece a opção de alterar o valor da iteração, bem como o atraso, para que você possa ver que o atraso não afeta nenhuma iteração subsequente – apenas a primeira.

Uma maneira interessante de usar essa propriedade é com um valor negativo. Por exemplo, usando a demonstração acima, tente definir o animation-delay para -0.5s . Você notará que o atraso negativo funciona quase como avançar em uma máquina do tempo – a animação começa no meio e não no início.

A propriedade do modo de preenchimento de animação

A propriedade longa final que abordarei neste tutorial de animações CSS é aquela que usei na demonstração anterior. Você notará que quando a animação para a iteração final, a caixa permanece onde está. Isso é feito usando animation-fill-mode .

 .box animation-fill-mode: forwards;

Essa propriedade define como uma animação aplica estilos ao elemento de destino antes e depois de sua execução. Isso é um pouco difícil de entender conceitualmente, então falarei sobre o significado de cada valor; então você pode comparar os valores usando a demonstração interativa.

Essa propriedade aceita os quatro valores de palavra-chave a seguir:

• none – O padrão, nenhum estilo aplicado antes ou depois da execução
• forwards – Mantém todos os estilos aplicados no último quadro-chave da animação
• backwards – mais ou menos o inverso do valor anterior, retém os estilos aplicados à animação assim que começa a execução, mas antes do início da animação
• both – Mantém estilos para forwards e backwards

A demonstração final neste tutorial de animações CSS tornará as coisas um pouco mais claras, mas esta pode levar muito tempo antes de você realmente conseguir o que faz e como consegue.

Por conveniência, adicionei todas as demos em uma única coleção CodePen.

Você notará que a demonstração permite ajustar o modo de preenchimento, atraso, direção e número de iterações, pois tudo isso pode afetar a aparência. Também adicionei uma cor de fundo diferente à caixa animada no primeiro quadro-chave, o que novamente ajuda a tornar os valores do modo de preenchimento um pouco mais claros. Se você ainda não entendeu como animation-fill-mode funciona, você pode conferir um artigo mais antigo que escrevi que discute animation-fill-mode em profundidade.

A propriedade abreviada de animação

Cobri oito propriedades diferentes neste tutorial de animação CSS para iniciantes e encorajo você a usar a mão longa. Isso tornará mais fácil para você ver os valores explícitos definidos.

Depois de ter uma boa compreensão de cada uma das propriedades, você tem a opção de usar a propriedade abreviada de animation , que permite definir todas as propriedades longas em uma única declaração.

 .box animation: moveObject 2s ease-in-out 3 reverse running 1.3s forwards;

Com toda a honestidade, é muita informação em uma única linha. Eu recomendaria usar a abreviação se a declaração não incluir todas as propriedades, mas talvez apenas três ou quatro delas.

Se você usar a abreviação, poderá colocar os valores na ordem que desejar, mas observe as seguintes regras:

• O primeiro valor que define o tempo é a animation-duration ; qualquer valor de tempo subsequente é o animation-delay .
• Se houver um conflito entre uma palavra-chave e o animation-name , o valor da palavra-chave terá precedência se aparecer primeiro.
• Quaisquer valores omitidos retornarão ao seu estado inicial, como acontece com qualquer propriedade abreviada de CSS.

Aplicando várias animações a um único elemento

Um recurso final que é bom estar ciente é que você tem a opção de aplicar várias animações a um único objeto separando as animações por vírgula.

Aqui está um exemplo usando a abreviação:

 .box animation: moveObject 2s ease-in-out, fadeBox 3s linear;

Aqui, defini duas animações diferentes que mapeiam para dois conjuntos diferentes de quadros-chave, mas se aplicam ao mesmo objeto. Esse mesmo código poderia ser escrito à mão como:

 .box animation-name: moveObject, fadeBox; animation-duation: 2s, 3s; animation-timing-function: ease-in-out, linear;

Observe como cada propriedade inclui dois valores separados por vírgulas. Nesse caso, a taquigrafia seria quase definitivamente mais fácil de ler e manter.

Finalizando este tutorial de animações CSS

Um aviso final: use animação com moderação e lembre-se de que alguns usuários da web podem ser afetados negativamente por cores piscantes e outros objetos em movimento rápido.