W3docs
pt
Entrar

Regra CSS @keyframes

A regra @keyframes especifica o código de animação. A animação é criada mudando gradualmente de um conjunto de estilos CSS para outro.

A at-rule @keyframes é a base para as animações de keyframe usadas para animar (mudar gradualmente de um estilo para outro) diversas propriedades CSS. Essa regra permite especificar o que deve acontecer em momentos específicos durante a animação, definindo estilos para os keyframes (ou pontos de passagem) ao longo da sequência de animação.

A regra @keyframes é uma parte central da especificação de Animações CSS.

A regra @keyframes e seu identificador são seguidos por conjuntos de regras (ou seja, regras de estilo com seletores e blocos de declaração, como no código CSS normal) delimitados por chaves.

Keyframes na sequência de animação

Dentro das chaves, os seletores de keyframe definem quando os estilos devem mudar durante a sequência de animação. O conjunto de estilos CSS pode ser atualizado várias vezes ao longo da animação.

Seletor de keyframe

O bloco de declaração de keyframe inclui propriedades CSS e seus valores. Um seletor de keyframe pode usar uma porcentagem (%) ou as palavras-chave from (equivalente a 0%) e to (equivalente a 100%). 0% marca o início da animação e 100% marca o final.

Você não está limitado a dois keyframes. Adicionar seletores intermediários como 25% ou 75% permite controlar a animação em quantos pontos forem necessários:

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

Você também pode agrupar seletores que compartilham os mesmos estilos, separando-os por vírgulas: 0%, 100% { opacity: 1; }.

Como o navegador preenche os intervalos

Você declara estilos apenas nos pontos de passagem dos keyframes — o navegador interpola cada quadro entre eles. Se você animar background-color de verde em 0% para azul em 50%, as cores se mesclam suavemente nesse intervalo; você nunca precisa especificar os valores intermediários por conta própria.

Algumas regras governam esse preenchimento intermediário:

  • Apenas propriedades animáveis são interpoladas. Valores numéricos e de cor (como width, opacity, transform e color) animam suavemente. Propriedades como display mudam instantaneamente entre os keyframes, sem transição gradual.
  • O ritmo é controlado separadamente. A forma da curva de interpolação (linear, ease, ease-in-out, etc.) vem de animation-timing-function, não de @keyframes.
  • from/to ausentes são inferidos. Se você omitir o keyframe 0% ou 100%, o navegador usa o valor computado existente do elemento para aquela propriedade como o ponto de extremidade ausente.

Prefixos de fornecedor

A regra @keyframes é totalmente suportada por todos os navegadores modernos sem necessidade de prefixos de fornecedor. Prefixos legados (como -webkit- ou -moz-) não são mais necessários.

Sintaxe

Sintaxe da at-rule CSS @keyframes

@keyframes animationname {keyframes-selector {css-styles;}}

Usando @keyframes como palavra-chave

A regra @keyframes consiste na palavra-chave @keyframes seguida de um identificador (escolhido pelo desenvolvedor) que define a animação. Para vincular a animação a um elemento, esse identificador é usado como valor da propriedade animation-name.

É assim que fica:

Como definir uma animação e aplicá-la a um elemento

/* define the animation */
@keyframes your-animation-name {
  /* style rules */
}

/* apply it to an element */
.element {
  animation-name: your-animation-name;
  /* OR using the animation shorthand property */
  animation: your-animation-name 1s …;
}

Exemplo da regra @keyframes com a propriedade background-color:

Exemplo de at-rule CSS @keyframes

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element {
        padding: 50px;
        animation: backgrounds 4s infinite;
      }
      @keyframes backgrounds {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #cccccc;
        }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes example</h2>
    <div class="element">The background of this text is animated.</div>
  </body>
</html>
Experimente Você Mesmo »

Neste exemplo, animamos a propriedade background-color. Primeiro, definimos um identificador para a animação: backgrounds. Em seguida, definimos os seletores de keyframe (0%, 50% e 100%) e os valores da propriedade: verde, azul e cinza. Isso significa que no ponto de início (0%), a cor de fundo será verde-claro até atingir o próximo keyframe (50%). No meio da sequência de animação, o fundo se tornará azul-claro e, no ponto final (100%), será cinza.

Exemplo da regra @keyframes:

Exemplo de at-rule CSS @keyframes com valor infinite

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 10px;
        height: 100px;
        background: red;
        border-radius: 50%;
        position: relative;
        animation: element 4s infinite;
      }
      @keyframes element {
        0% {
          top: 0px;
          background: #1c87c9;
          width: 100px;
        }
        100% {
          top: 200px;
          background: #8ebf42;
          width: 150px;
        }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes rule example</h2>
    <div></div>
  </body>
</html>
Experimente Você Mesmo »

Exemplo de uso da regra @keyframes para criar uma imagem em queda:

Exemplo de at-rule CSS @keyframes com a propriedade transform

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        height: 90%;
      }
      .container {
        margin: 30px auto;
        min-width: 320px;
        max-width: 600px;
        height: 90%;
        overflow: hidden;
      }
      img {
        transform-origin: left center;
        animation: fall 5s infinite;
      }
      @keyframes fall {
        from {
          transform: rotate(0) translateX(0);
          opacity: 1;
        }
        to {
          transform: rotate(90deg) translateX(200px);
          opacity: 0.1;
        }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes example</h2>
    <div class="container">
      <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs" width="150" height="50" />
    </div>
  </body>
</html>
Experimente Você Mesmo »

Componentes da sintaxe

ComponenteDescrição
identifierEspecifica o nome da animação. Obrigatório.
keyframe-selectorEspecifica a porcentagem da duração da animação. Aceita 0% a 100%, from (0%) ou to (100%). Obrigatório.
declaration-blockContém as propriedades e valores CSS a aplicar em cada keyframe. Obrigatório.

Erros comuns

  • @keyframes sozinho não faz nada. A regra apenas define a animação. Nada se move até que você referencie o nome a partir de um elemento com a propriedade animation-name (ou a forma abreviada animation) e forneça uma animation-duration diferente de zero.
  • Os nomes diferenciam maiúsculas de minúsculas e não podem ser palavras-chave globais do CSS. Evite palavras reservadas como none, initial, inherit e unset como nomes de animação.
  • Regras de keyframe duplicadas cascateiam. Se dois blocos @keyframes compartilharem o mesmo nome, o último definido prevalece totalmente — eles não são mesclados.
  • !important dentro de um keyframe é ignorado. A especificação de Animações descarta especificamente as declarações !important dentro dos keyframes.

Tópicos relacionados

Prática

Prática
O que é correto sobre os keyframes CSS?
O que é correto sobre os keyframes CSS?
Was this page helpful?