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 renderização e problemas de desempenho. Mas hoje em dia, as animações CSS podem ser usadas muito mais livremente e a sintaxe geralmente é muito mais fácil de aprender em comparação com recursos CSS como grid 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 as animações CSS.

A sintaxe @keyframes

Toda animação CSS tem duas partes: uma ou mais animation-* propriedades junto com um conjunto de quadros-chave de animação que são definidos usando o @keyframes em regra. Vamos dar uma olhada em detalhes no que se passa na construção de um @keyframes conjunto de regras.

A sintaxe fica assim:

@keyframes moveObject {
  0% {
    transform: translateX(0);
  }

  50% {
     transform: translateX(300px);
  }

  100% {
    transform: translateX(300px) scale(1.5);
  }
}

Como mostrado aqui, o @keyframes at-rule inclui três partes básicas:

• o @keyframes regra 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 o nome que eu quiser, diferencia maiúsculas de minúsculas e deve respeitar as identificador personalizado regras em CSS. Este nome personalizado deve corresponder ao nome usado no animation-name propriedade (discutida posteriormente).

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

@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. Explicarei mais tarde por que isso é necessário. Mas, por enquanto, saiba que essa animação inclui três quadros-chave que representam as etapas dessa 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 o @keyframes sintaxe:

• 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% { ... }
• o !important a palavra-chave 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 uma boa compreensão do @keyframes sintaxe 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ê criar deve ter um nome que apareça no @keyframes sintaxe. Este nome deve ser o mesmo nome definido usando o animation-name propriedade.

Usando o CSS da demonstração anterior, a sintaxe fica assim:

.box {
  animation-name: moveObject;
}

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

Algumas coisas para manter 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 do 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, initialou inherit.

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

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

.box {
  animation-duration: 2s;
}

O acima seria o equivalente ao seguinte:

.box {
  animation-duration: 2000ms;
}

Você pode ver o animation-duration propriedade em ação na seguinte demonstração do CodePen. 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, você pode nem perceber nenhum movimento. Tente definir um número maior se estiver usando milissegundos.

Algumas notas sobre o uso animation-duration:

• 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 de função de tempo de animação

o animation-timing-function, cujo significado não é tão óbvio quanto as duas propriedades anteriores, é usado para definir a maneira como 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 de seleção para escolher um dos sete valores de palavra-chave. Observe que o ease-* valores ‘facilitam’ a animação de várias maneiras. Um valor linear é consistente o tempo todo.

o animation-timing-function propriedade 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 de palavras-chave step-start e step-end são equivalentes aos valores steps(1, jump-start) e steps(1, jump-end)respectivamente.

Quanto a 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 no cubic-bezier() função. Dois dos argumentos podem ser negativos e dois são restritos a valores decimais entre 0 e 1. Para uma explicação decente de como esses tipos de funções de temporização funcionam, você pode conferir Este artigo ou esta ferramenta interativa.

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

• Um número 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 “se mantém” em intervalos específicos

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

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

A propriedade de contagem de iteração de animação

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. o animation-iteration-count A propriedade permite fazer 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 (auto-explicativo) ou use 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 executa 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.

Esta propriedade é mais útil quando usada em conjunto com o animation-direction propriedade (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 tentar 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 da animação

Conforme mencionado acima neste tutorial de animações CSS, o animation-direction propriedade funciona bem em conjunto com animation-iteration-count. o animation-direction A propriedade permite que você defina em qual direção 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 – Igual a alternate mas reproduz para trás na primeira iteração

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

A propriedade de estado de reprodução da animação

o animation-play-state A propriedade não é extremamente útil em um ambiente CSS estático, mas pode ser útil ao escrever animações interativas via JavaScript ou até 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. o animation-delay propriedade 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 tentar 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 forma interessante de usar esta propriedade é com um valor negativo. Por exemplo, usando a demonstração acima, tente configurar 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 começo.

A propriedade de modo de preenchimento de animação

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

.box {
  animation-fill-mode: forwards;
}

Esta 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 abordarei 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, ele retém os estilos aplicados à animação assim que começa a execução, mas antes que a animação comece
• both – Mantém estilos para ambos 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 entender o que ela faz e como consegue.

Por conveniência, adicionei todas as demonstrações 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 antigo eu escrevi que discute animation-fill-mode em profundidade.

A propriedade abreviada da animação

Cobri oito propriedades diferentes neste tutorial de animação CSS para iniciantes e encorajo você a usar a mão longa. Isso facilitará a visualização dos valores explícitos definidos.

Depois de ter uma boa compreensão de cada uma das propriedades, você tem a opção de usar o animation propriedade abreviada, que permite definir todas as propriedades extensas 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 é o animation-duration; qualquer valor de tempo subseqüente é o animation-delay.
• Se houver um conflito entre uma palavra-chave e o animation-nameo valor da palavra-chave terá precedência se aparecer primeiro.
• Quaisquer valores omitidos voltarão ao seu estado inicial, como acontece com qualquer propriedade abreviada CSS.

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

Um recurso final do qual é 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 mapeariam para dois conjuntos diferentes de quadros-chave, mas se aplicariam 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.

Concluindo 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 piscando e outros objetos em movimento rápido.