animation

A propriedade CSS abreviada animation, aplica uma animação entre estilos. É uma abreviação de animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, e animation-play-state.

Experimente

Propriedades constituintes

Esta propriedade é uma abreviação para as seguintes propriedades CSS:

Sintaxe

css
/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | easing-function | delay | name */
animation: 3s linear 1s slidein;

/* two animations */
animation:
  3s linear slidein,
  3s ease-out 5s slideout;

A propriedade animation é especificada como uma ou mais animações separadas por vírgulas.

Cada animação individual é especificada como:

Valores

<single-easing-function>

Determina o tipo de transição. O valor deve ser um dos disponíveis em <easing-function>.

<single-animation-iteration-count>

O número de vezes que a animação é reproduzida. O valor deve ser um dos disponíveis em animation-iteration-count.

<single-animation-direction>

A direção em que a animação é reproduzida. O valor deve ser um dos disponíveis em animation-direction.

<single-animation-fill-mode>

Determina como os estilos devem ser aplicados no alvo da animação antes e depois de sua execução. O valor deve ser um dos disponíveis em animation-fill-mode.

<single-animation-play-state>

Determina se a animação está sendo reproduzida ou não. O valor deve ser um dos disponíveis em animation-play-state.

Descrição

A ordem dos valores de tempo dentro de cada definição de animação é importante: o primeiro valor que pode ser analisado como <time> é atribuído ao animation-duration , e o segundo é atribuído a animation-delay.

A ordem de outros valores dentro de cada definição de animação também é importante para distinguir um valor animation-name de outros valores. Se um valor na abreviação animation puder ser analisado como um valor para uma propriedade de animação diferente de animation-name, o valor será aplicado a essa propriedade primeiro e não a animation-name. Por esta razão, a prática recomendada é especificar um valor para animation-name como o último valor em uma lista de valores ao usar a abreviação animation; isso é válido mesmo quando você especifica várias animações separadas por vírgula usando a abreviação animation.

Um valor animation-name não precisa ser declarado na propriedade abreviada animation. Se nenhum nome existir, não haverá animação para aplicar em nenhuma das propriedades.

Quando o valor animation-duration é omitido da propriedade abreviada animation, o valor padrão dessa propriedade é 0s. Nesse caso, a animação ainda ocorrerá (o animationStart e [animationEnd](/pt-BR/docs/Web/API/ Element/animationend_event) eventos serão acionados), mas nenhuma animação será visível.

Preocupações com acessibilidade

A animação piscando e piscando pode ser problemática para pessoas com problemas cognitivos, como o Transtorno de Déficit de Atenção e Hiperatividade (TDAH). Além disso, certos tipos de movimento podem ser um gatilho para distúrbios vestibulares, epilepsia e enxaqueca e sensibilidade escotópica.

Considere fornecer um mecanismo para pausar ou desabilitar a animação, bem como usar a Consulta de mídia de movimento reduzido para criar uma experiência complementar para usuários que têm expressou uma preferência por experiências animadas reduzidas.

Definição formal

Initial valueas each of the properties of the shorthand:
Aplica-se aall elements
Inheritednão
Computed valueas each of the properties of the shorthand:
Animation typeNot animatable

Sintaxe formal

animation = 
  <single-animation>#  

<single-animation> = 
  <time [0s,∞]>                       ||
  <easing-function>                   ||
  <time>                              ||
  <single-animation-iteration-count>  ||
  <single-animation-direction>        ||
  <single-animation-fill-mode>        ||
  <single-animation-play-state>       ||
  [ none | <keyframes-name> ]         

<easing-function> = 
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<single-animation-iteration-count> = 
  infinite        |
  <number [0,∞]>  

<single-animation-direction> = 
  normal             |
  reverse            |
  alternate          |
  alternate-reverse  

<single-animation-fill-mode> = 
  none       |
  forwards   |
  backwards  |
  both       

<single-animation-play-state> = 
  running  |
  paused   

<keyframes-name> = 
  <custom-ident>  |
  <string>        

<linear-easing-function> = 
  linear( <linear-stop-list> )  

<cubic-bezier-easing-function> = 
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )  

<step-easing-function> = 
  step-start                             |
  step-end                               |
  steps( <integer> , <step-position>? )  

<linear-stop-list> = 
  [ <linear-stop> ]#  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

<linear-stop> = 
  <number>               &&
  <linear-stop-length>?  

<linear-stop-length> = 
  <percentage>{1,2}

Exemplos

Nota: A animação das propriedades do CSS Box Model não é recomendada. A animação de qualquer propriedade de box model é inerentemente para a CPU; considere animar a propriedade transform.

Nascer do Sol

Aqui animamos um sol amarelo em um céu azul claro. O sol nasce para o centro da viewport e depois desaparece de vista.

html
<div class="sun"></div>
css
:root {
  overflow: hidden; /* esconde qualquer parte do sol abaixo do horizonte */
  background-color: lightblue;
  display: flex;
  justify-content: center; /* centraliza o sol ao fundo */
}

.sun {
  background-color: yellow;
  border-radius: 50%; /* cria um fundo circular */
  height: 100vh; /* torna o sol do tamanho da viewport */
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate sun-rise;
}

@keyframes sun-rise {
  from {
    /* empurra o sol para além da janela de visualização */
    transform: translateY(110vh);
  }
  to {
    /* retorna o sol à sua posição padrão */
    transform: translateY(0);
  }
}

Animando Múltiplas Propriedades

Adicionando à animação do sol no exemplo anterior, adicionamos uma segunda animação mudando a cor do sol conforme ele nasce e se põe. O sol começa vermelho escuro quando está abaixo do horizonte e muda para laranja brilhante quando atinge o topo.

html
<div class="sun"></div>
css
:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate animating-multiple-properties;
}

/* é possível animar várias propriedades em uma única animação */
@keyframes animating-multiple-properties {
  from {
    transform: translateY(110vh);
    background-color: red;
    filter: brightness(75%);
  }
  to {
    transform: translateY(0);
    background-color: orange;
    /* propriedades não definidas, ou seja, 'filtro' reverterá para os valores padrão */
  }
}

Aplicando Múltiplas Animações

Aqui está um sol que nasce e se põe sobre um fundo azul claro. O sol gira gradualmente através de um arco-íris de cores. O tempo do sol, posição e cor são independentes.

html
<div class="sun"></div>
css
:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /* várias animações são separadas por vírgulas, os parâmetros de cada animação são definidos independentemente */
  animation:
    4s linear 0s infinite alternate rise,
    24s linear 0s infinite psychedelic;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes psychedelic {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

Animações Múltiplas em Cascata

Aqui está um sol amarelo sobre um fundo azul claro. O sol salta entre as lados esquerdo e direito da viewport. O sol permanece na janela de visualização mesmo embora uma animação de ascensão seja definida. A propriedade de transformação da animação de subida é 'substituído' pela animação de salto.

html
<div class="sun"></div>
css
:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /*
    as animações declaradas posteriormente na cascata substituirão as
    propriedades de animações declaradas anteriormente
  */
  /* bounce 'substitui' a transformação definida por ascensão, portanto, o sol só se move horizontalmente */
  animation:
    4s linear 0s infinite alternate rise,
    4s linear 0s infinite alternate bounce;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes bounce {
  from {
    transform: translateX(-50vw);
  }
  to {
    transform: translateX(50vw);
  }
}

Veja Usando animações CSS para exemplos adicionais.

Especificações

Specification
CSS Animations Level 1
# animation

Compatiblidade com navegadores

BCD tables only load in the browser

Veja também