Animações CSS

Animações CSS

O CSS pode implementar efeitos de animação em elementos HTML sem usar JavaScript ou Flash!

CSS

Nesta seção, você aprenderá as seguintes propriedades:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Suporte do navegador para animação

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Propriedade Chrome IE Firefox Safari Opera
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

O que é animação CSS?

As animações fazem com que o elemento gradualmente mude de um estilo para outro.

Você pode alterar livremente qualquer quantidade de atributos CSS.

Para usar animações CSS, você deve primeiro especificar alguns pontos-chave para a animação.

Os pontos-chave contêm o estilo do elemento em um tempo específico.

@keyframes regra

Se você estiver @keyframes As regras especificam o estilo CSS, e a animação gradualmente mudará do estilo atual para o novo estilo no tempo especificado.

Para que a animação funcione, é necessário atribuí-la a algum elemento.

O exemplo a seguir atribui a animação 'example' ao elemento <div>. A animação durará 4 segundos, mudando gradualmente a cor de fundo do elemento <div> de 'red' para 'yellow':

Exemplo

/* Código da animação */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
{}
/* Aplicar efeito de animação a este elemento */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
{}

Experimente você mesmo

Atenção:animation-duration O atributo define quanto tempo levará para completar a animação. Se não for especificado animation-duration Se não for especificado o atributo, a animação não ocorrerá, pois o valor padrão é 0s (0 segundos).

No exemplo acima, usando os termos 'from' e 'to' (representando 0% (início) e 100% (conclusão)), configuramos quando a mudança de estilo deve ocorrer.

Você também pode usar porcentagens. Ao usar porcentagens, você pode adicionar quantas alterações de estilo precisar.

O exemplo a seguir mudará a cor de fundo do elemento <div> quando o animação completar 25%, 50% e 100%.

Exemplo

/* Código da animação */
@keyframes example {
  0%   {background-color: red;}
  25% {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
{}
/* Aplicar animação aos elementos */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
{}

Experimente você mesmo

O exemplo a seguir muda a cor de fundo e a posição do elemento <div> quando a animação estiver concluída em 25%, 50% e 100%:

Exemplo

/* Código da animação */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
{}
/* Aplicar animação aos elementos */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
{}

Experimente você mesmo

Atrasar a animação

animation-delay A propriedade determina o tempo de atraso antes do início da animação.

O exemplo a seguir tem um atraso de 2 segundos antes de começar a animação:

Exemplo

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
{}

Experimente você mesmo

Valores negativos também são permitidos. Se usar valores negativos, a animação começará a reproduzir-se como se já tivesse sido reproduzida por N segundos.

No exemplo a seguir, a animação começará a reproduzir-se como se já tivesse sido reproduzida por 2 segundos:

Exemplo

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
{}

Experimente você mesmo

Definir o número de vezes que a animação deve ser executada

animation-iteration-count A propriedade especifica o número de vezes que a animação deve ser executada.

O exemplo a seguir executa a animação 3 vezes antes de parar:

Exemplo

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
{}

Experimente você mesmo

O exemplo a seguir usa o valor "infinite" para que a animação continue para sempre:

Exemplo

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
{}

Experimente você mesmo

Reproduzir animação em sentido reverso ou alternado

animation-direction A propriedade especifica se a animação deve reproduzir para frente, para trás ou alternadamente.

animation-direction A propriedade aceita os seguintes valores:

  • normal - A animação reproduz normalmente (para frente). Valor padrão
  • reverse - A animação reproduz em direção oposta (para trás)
  • alternate - A animação reproduz primeiro para frente e então para trás
  • alternate-reverse - A animação reproduz primeiro para trás e então para frente

O exemplo a seguir executa a animação na direção oposta (para trás):

Exemplo

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
{}

Experimente você mesmo

O exemplo a seguir usa o valor "alternate" para que a animação execute primeiro para frente e então para trás:

Exemplo

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
{}

Experimente você mesmo

O exemplo a seguir usa o valor "alternate-reverse" para que a animação execute primeiro para trás e então para frente:

Exemplo

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
{}

Experimente você mesmo

Especificar a curva de velocidade da animação

animation-timing-function A propriedade define a curva de velocidade da animação.

animation-timing-function A propriedade aceita os seguintes valores:

  • ease - Especifique uma animação que comece mais devagar, acelere e acabe mais devagar (padrão)
  • linear - Especifique uma animação que tenha a mesma velocidade de início a fim
  • ease-in - Especifique uma animação que comece mais devagar
  • ease-out - Especifique uma animação que acabe mais devagar
  • ease-in-out - Especifique uma animação que comece e acabe mais devagar
  • cubic-bezier(n,n,n,n) - Execute seus próprios valores definidos na função de Bézier de três pontos

Os seguintes exemplos mostram alguns dos diferentes curvas de velocidade que podem ser usados:

Exemplo

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Experimente você mesmo

Especificar o modo de preenchimento da animação

As animações CSS não afetarão o elemento antes da reprodução do primeiro frame de chave ou após a reprodução do último frame de chave.animation-fill-mode a propriedade pode sobrepujar esse comportamento.

Quando a animação não estiver sendo reproduzida (antes do início, após o término ou ambos os terminos),animation-fill-mode A propriedade define o estilo do elemento alvo.

A propriedade animation-fill-mode aceita os seguintes valores:

  • none - Valor padrão. A animação não aplicará nenhum estilo ao elemento antes ou após a execução.
  • forwards - O elemento manterá os valores de estilo definidos pelo último frame de chave (dependendo de animation-direction e animation-iteration-count).
  • backwards - O elemento obterá os valores de estilo definidos pelo primeiro frame de chave (dependendo de animation-direction) e manterá esse valor durante o atraso da animação.
  • both - A animação seguirá as regras tanto para frente quanto para trás, expandindo as propriedades da animação em ambas as direções.

O exemplo a seguir faz com que o elemento <div> mantenha os valores de estilo do último frame de chave no final da animação:

Exemplo

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
{}

Experimente você mesmo

O exemplo a seguir faz com que o elemento <div> obtenha o valor do estilo da primeira chave-chave antes do início da animação (durante o atraso da animação):

Exemplo

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
{}

Experimente você mesmo

O exemplo a seguir faz com que o elemento <div> obtenha o valor do estilo da primeira chave-chave antes do início da animação e mantenha o valor do estilo da última chave-chave no final da animação:

Exemplo

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
{}

Experimente você mesmo

Propriedades abreviadas de animação

O exemplo a seguir usa seis propriedades de animação:

Exemplo

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
{}

Experimente você mesmo

Usando abreviação animation As propriedades também podem alcançar o efeito de animação do exemplo anterior:

Exemplo

div {
  animation: example 5s linear 2s infinite alternate;
{}

Experimente você mesmo

Propriedades de animação CSS

A tabela a seguir lista as regras @keyframes e todas as propriedades de animação CSS:

Propriedade Descrição
@keyframes Define o modo de animação.
animation Define a propriedade abreviada para todos os atributos de animação.
animation-delay Define o atraso antes de começar a animação.
animation-direction Define se a animação deve ser reproduzida para frente, para trás ou alternadamente.
animation-duration Define o tempo que a animação deve gastar para completar um ciclo.
animation-fill-mode Define o estilo do elemento quando não está reproduzindo animação (antes de começar, após o término, ou ambos).
animation-iteration-count Define a quantidade de vezes que a animação deve ser reproduzida.
animation-name Define o nome da animação @keyframes.
animation-play-state Define se a animação deve ser executada ou pausada.
animation-timing-function Define a curva de velocidade da animação.