W3docs
pt
Entrar

Propriedade animation do CSS

Aprenda sobre a propriedade animation do CSS, usada para animar gradualmente propriedades CSS de um estilo para outro. Veja exemplos.

A propriedade animation do CSS permite animar elementos — alterando gradualmente um ou mais valores CSS ao longo do tempo — sem nenhum JavaScript. Ela funciona com propriedades cujos valores podem ser interpolados, como dimensões de layout (border, height, width), posição (left, top), font size, color e opacity.

Esta página abrange o shorthand animation, todas as oito propriedades longhands individuais animation-*, a regra at-rule @keyframes que as controla, como executar várias animações ao mesmo tempo e como respeitar usuários que preferem movimentos reduzidos. animation é uma das propriedades do CSS3.

Uma animação é composta por duas partes: uma regra @keyframes que descreve como o elemento aparece em pontos ao longo da linha do tempo, e a propriedade animation (ou seus longhands) no elemento que define como reproduzir essa linha do tempo — por quanto tempo, quantas vezes, em qual direção e assim por diante.

Navegadores mais antigos podem exigir o prefixo -webkit- para suporte legado.

Informação

Propriedades que usam uma palavra-chave como valor, como display: none; ou visibility: hidden;, não podem ser animadas. Propriedades com valores como height: auto; também não podem ser animadas.

A regra at-rule @keyframes

Para usar animação, você deve primeiro especificar o que deve acontecer em momentos específicos durante a animação. Isso é definido com a regra at-rule @keyframes.

A regra @keyframes consiste na palavra-chave "@keyframes" seguida do animation-name, que identifica a animação. A animação é então aplicada a um elemento usando esse identificador como valor da propriedade animation-name.

Nas chaves, colocamos seletores de keyframe, que definem os keyframes (ou pontos de passagem) na sequência de animação em que os estilos devem ser alterados. O seletor de keyframe pode começar com uma porcentagem (%) ou com as palavras-chave "from" (equivalente a 0%) e "to" (equivalente a 100%). 0% é o ponto de início da animação e 100% é o ponto final.

Exemplo de animação com a regra @keyframe:

Exemplo da propriedade animation com @keyframes

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
        padding: 50px;
        animation: pulse 4s infinite;
      }
      @keyframes pulse {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #d5dce8;
        }
      }
    </style>
  </head>
  <body>
    <div class="element">Background of this text is animated using CSS3 animation property.</div>
  </body>
</html>
Experimente Você Mesmo »

Neste exemplo, vinculamos a animação ao elemento <div>. A animação terá duração de 4 segundos e alterará gradualmente a cor de fundo do elemento <div> de "verde" para "cinza".

Propriedades relacionadas à animação

animation é a propriedade shorthand para definir todas as propriedades de animação individuais em uma única declaração. Os longhands padrão estão resumidos abaixo.

PropriedadeDefineValores comuns
animation-nameA regra @keyframes a ser reproduzidaum nome, none
animation-durationQuanto tempo dura um ciclo2s, 500ms (padrão 0s — sem animação)
animation-timing-functionA curva de velocidade em cada cicloease, linear, ease-in-out, cubic-bezier(…)
animation-delayEspera antes de iniciar1s, -2s (negativo inicia no meio da animação)
animation-iteration-countQuantas vezes reproduzirum número, infinite
animation-directionPara frente, reverso ou vai-e-voltanormal, reverse, alternate
animation-fill-modeEstilos antes/depois da execuçãonone, forwards, backwards, both
animation-play-stateSe está em execução ou pausadarunning, paused

Agora vamos ver as propriedades relacionadas à animação em ação.

Exemplo de animação com algumas propriedades relacionadas à animação:

@keyframes pulse {
  /* declare animation actions here */
}

.element {
  animation-name: pulse;
  animation-duration: 3.5s;
  animation-timing-function: ease-in;
  animation-delay: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

/*
  The same can be declared using the animation shorthand property 
*/

.element {
  animation: pulse 3.5s ease-in 1s alternate infinite none running;
}

A ordem dos valores no shorthand é bastante flexível, com duas regras a lembrar: o nome deve estar presente, e quando tanto uma duração quanto um atraso aparecem, o primeiro valor de tempo é a duração e o segundo é o atraso. Qualquer valor omitido reverte para seu padrão (por exemplo, omitir animation-iteration-count reproduz a animação uma vez).

Animation-name

Esta propriedade define o nome da regra @keyframes que você deseja aplicar.

Sintaxe da propriedade animation-name

animation-name: keyframe-name | none | initial | inherit

Exemplo da propriedade animation-name:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        padding: 50px;
        animation: element 4s infinite;
      }
      @keyframes element {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #d5dce8;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-name example</h2>
    <div>The name of the animation is set as "element".</div>
  </body>
</html>
Experimente Você Mesmo »

Animation-duration

Define o tempo (em segundos ou milissegundos) que a animação leva para completar um ciclo. Se esta propriedade não for especificada, a animação não ocorrerá.

Sintaxe da propriedade animation-duration

animation-duration: time | initial | inherit

Exemplo da propriedade animation-duration:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
        padding: 50px;
        animation: pulse 7s infinite;
      }
      @keyframes pulse {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #eee
        }
      }
    </style>
  </head>
  <body>
    <div class="element">Background of this text is animated using CSS3 animation property</div>
  </body>
</html>
Experimente Você Mesmo »

Animation-timing-function

Esta propriedade define como uma animação progredirá ao longo da duração de cada ciclo — não ao longo de toda a animação.

Sintaxe da propriedade animation-timing-function

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit

Exemplo da propriedade animation-timing-function com o valor "ease":

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #1c87c9;
        position: relative;
        -webkit-animation: element 5s infinite;
        /* Safari 4.0 - 8.0 */
        -webkit-animation-timing-function: ease;
        /* Safari 4.0 - 8.0 */
        animation: element 5s infinite;
        animation-timing-function: ease;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
      @keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-timing-function example</h2>
    <div></div>
  </body>
</html>
Experimente Você Mesmo »

Animation-delay

Esta propriedade define o tempo (em segundos ou milissegundos) entre o carregamento do elemento e o início da animação.

Sintaxe da propriedade animation-delay

animation-delay: time | initial | inherit

Exemplo da propriedade animation-delay:

Exemplo da propriedade CSS animation-delay

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #1c87c9;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: 3s;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example</h2>
    <p>Here the animation starts after 3 seconds.</p>
    <div></div>
  </body>
</html>
Experimente Você Mesmo »

Animation-direction

Define se a animação deve ser reproduzida em sentido inverso em ciclos alternados ou não.

Sintaxe da propriedade animation-direction

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit

Os seguintes valores podem ser aplicados:

  • normal — (padrão) a animação é reproduzida para frente (keyframes 0% - 100%)
  • reverse — a animação é reproduzida para trás (keyframes 100% - 0%)
  • alternate — a animação é reproduzida para frente, depois é invertida e repetida.
  • alternate-reverse — a animação é reproduzida para trás e depois para frente.

Exemplo da propriedade animation-direction:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 1;
        animation-direction: normal;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>Here the animation plays forwards.</p>
    <div></div>
  </body>
</html>
Experimente Você Mesmo »

Animation-iteration-count

Define o número de vezes que um ciclo de animação deve ser reproduzido antes de parar. O valor padrão é um, mas qualquer valor inteiro positivo pode ser definido. Se você definir a palavra-chave infinite, a animação será reproduzida indefinidamente.

Aviso

Um inteiro zero ou negativo nunca reproduzirá a animação.

Sintaxe da propriedade animation-iteration-count

animation-iteration-count: number | infinite | initial | inherit

Exemplo da propriedade animation-iteration-count:

Exemplo da propriedade CSS animation-iteration-count:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      div {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 30px 0;
        border-radius: 50%;
        animation-name: pulse;
      }
      .element-one {
        background-color: #1c87c9;
        animation-duration: 3s;
        animation-iteration-count: 3;
      }
      .element-two {
        margin: 0;
        background-color: #83bf42;
        animation-duration: 5s;
        animation-iteration-count: 2;
      }
      @keyframes pulse {
        0% {
          left: 0;
        }
        50% {
          left: 50%;
        }
        100% {
          left: 0;
        }
      }
    </style>
  </head>
  <body>
    <h2>The animation-iteration-count example</h2>
    <p>The animation-iteration-count sets the number of times an animation cycle should be played before stopping.</p>
    <div class="element-one"></div>
    <div class="element-two"></div>
  </body>
</html>
Experimente Você Mesmo »

Animation-fill-mode

Esta propriedade especifica um estilo para o elemento aplicado antes ou depois da execução da animação.

Sintaxe da propriedade animation-fill-mode

animation-fill-mode: none | forwards | backwards | both | initial | inherit

Ela pode assumir os seguintes valores:

  • forwards - especifica que o elemento deve manter os valores de estilo definidos pelo último keyframe (depende das propriedades animation-iteration-count e animation-direction).
  • backwards - especifica que o elemento deve obter os valores de estilo definidos pelo primeiro keyframe (depende de animation-direction) e mantê-los durante o período de animation-delay.
  • both - especifica que a animação deve seguir as regras tanto de forwards quanto de backwards.
  • none - (padrão) especifica que nenhum estilo será aplicado ao elemento antes ou depois da execução da animação.

Exemplo da propriedade animation-fill-mode com o valor "forwards":

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        -webkit-animation: element 5s;
        /* Safari 4.0 - 8.0 */
        -webkit-animation-fill-mode: forwards;
        /* Safari 4.0 - 8.0 */
        animation: element 5s;
        animation-fill-mode: forwards;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: blue;
        }
      }
      @keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: #8ebf42;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-fill-mode example</h2>
    <div></div>
  </body>
</html>
Experimente Você Mesmo »

Animation-play-state

Esta propriedade especifica se a animação está em execução ou pausada.

Sintaxe da propriedade animation-play-state

animation-play-state: paused | running | initial | inherit

O valor padrão é running.

Exemplo da propriedade animation-play-state com o valor "running":

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #ccc;
        position: relative;
        animation: play 10s;
        animation-play-state: running;
      }
      @keyframes play {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-play-state example</h2>
    <p>Here the animation-play-state is set to "running".</p>
    <div></div>
  </body>
</html>
Experimente Você Mesmo »

Múltiplas Animações

É possível declarar múltiplas animações em um seletor; basta separar os valores com vírgulas.

Exemplo de múltiplas animações em um seletor:

Exemplo da Propriedade Animation com Múltiplas Animações

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .element {
        height: 200px;
        width: 200px;
        background-color: #1c87c9;
        animation: pulse 5s ease infinite alternate, nudge 5s linear infinite alternate;
      }
      @keyframes pulse {
        0%,
        100% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
      }
      @keyframes nudge {
        0%,
        100% {
          transform: translate(0, 0);
        }
        50% {
          transform: translate(150px, 0);
        }
        80% {
          transform: translate(-150px, 0);
        }
      }
    </style>
  </head>
  <body>
    <div class="element"></div>
  </body>
</html>
Experimente Você Mesmo »

Respeitando o movimento reduzido

Movimentos grandes ou constantes podem causar náusea, tontura ou enxaquecas em alguns usuários. Os sistemas operacionais expõem uma configuração de "reduzir movimento" e você pode respeitá-la com a media query prefers-reduced-motion — desativando as animações (ou suavizando-as) para esses usuários enquanto as mantém para todos os outros.

.element {
  animation: pulse 4s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .element {
    animation: none;
  }
}

É uma boa prática envolver qualquer movimento não essencial nesta query para que suas animações permaneçam acessíveis.

Problemas comuns

  • Sem animation-duration, não há animação. A duração padrão é 0s, portanto os keyframes nunca têm chance de ser reproduzidos.
  • Valores de palavra-chave e auto não são animáveis. Como observado acima, propriedades como display, visibility e height: auto não podem ser interpoladas. Anime opacity e transform em vez disso — eles também são os mais performáticos para animar.
  • forwards só funciona se o contador de iterações for finito. animation-fill-mode: forwards mantém o último keyframe após o término da animação; com infinite, ela nunca termina, portanto não há nada para manter.
  • A ordem importa para valores de tempo no shorthand. O primeiro <time> é a duração, o segundo é o atraso.

Propriedades relacionadas

  • @keyframes — define a linha do tempo da animação.
  • animation-name — escolhe qual regra @keyframes reproduzir.
  • transition — anima entre dois estados em um gatilho como :hover.
  • transform — move, dimensiona e rotaciona elementos (ideal para animar).

Prática

Prática
Quais das afirmações a seguir sobre animação CSS são verdadeiras?
Quais das afirmações a seguir sobre animação CSS são verdadeiras?
Was this page helpful?