A propriedadeCSSabreviadaanimation, aplica uma animação entre estilos. É uma abreviação deanimation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode, eanimation-play-state.

Experimente

animation: 3s ease-in 1s infinite reverse both running slidein;

animation: 3s linear 1s infinite running slidein;

animation: 3s linear 1s infinite alternate slidein;

animation: 0.5s linear 1s infinite alternate slidein;

<section>  <div></div></section>

#example-element {  background-color: #1766aa;  margin: 20px;  border: 5px solid #333;  width: 150px;  height: 150px;  border-radius: 50%;}@keyframes slidein {  from {    margin-left: -20%;  }  to {    margin-left: 100%;  }}

Propriedades constituintes

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

• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function

Sintaxe

/* @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 propriedadeanimation é especificada como uma ou mais animações separadas por vírgulas.

Cada animação individual é especificada como:

• zero, uma ou duas ocorrências do valor<time>

• zero ou uma ocorrência dos seguintes valores:

  • <single-easing-function>
  • <single-animation-iteration-count>
  • <single-animation-direction>
  • <single-animation-fill-mode>
  • <single-animation-play-state>

• um nome opcional para a animação que pode sernone, um<custom-ident> ou uma<string>

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 emanimation-iteration-count.

<single-animation-direction>

A direção em que a animação é reproduzida. O valor deve ser um dos disponíveis emanimation-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 emanimation-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 emanimation-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 aoanimation-duration , e o segundo é atribuído aanimation-delay.

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

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

Quando o valoranimation-duration é omitido da propriedade abreviadaanimation, o valor padrão dessa propriedade é0s. Nesse caso, a animação ainda ocorrerá (oanimationStart 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 aConsulta 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.

• Projetando uma animação na Web mais segura para sensibilidade ao movimento · Um artigo separado
• Uma introdução à consulta de mídia de movimento reduzido | CSS-Tricks
• Design responsivo para movimento | WebKit
• MDN Understanding WCAG, Diretriz 2.2 explicações
• Entendendo o Critério de Sucesso 2.2.2 | W3C Understanding WCAG 2.0

Definição formal

Sintaxe formal

animation =
<single-animation>#

<single-animation> =
<'animation-duration'>||
<easing-function>||
<'animation-delay'>||
<single-animation-iteration-count>||
<single-animation-direction>||
<single-animation-fill-mode>||
<single-animation-play-state>||
[none|<keyframes-name>]||
<single-animation-timeline>

<animation-duration> =
[auto|<time [0s,∞]>]#

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

<animation-delay> =
<time>#

<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>

<single-animation-timeline> =
auto|
none|
<dashed-ident>|
<scroll()>|
<view()>

<linear-easing-function> =
linear|
<linear()>

<cubic-bezier-easing-function> =
ease|
ease-in|
ease-out|
ease-in-out|
<cubic-bezier()>

<step-easing-function> =
step-start|
step-end|
<steps()>

<scroll()> =
scroll([<scroller>||<axis>]?)

<view()> =
view([<axis>||<'view-timeline-inset'>]?)

<linear()> =
linear([<number>&&<percentage>{0,2}]#)

<cubic-bezier()> =
cubic-bezier([<number [0,1]> ,<number>]#{2})

<steps()> =
steps(<integer> ,<step-position>?)

<scroller> =
root|
nearest|
self

<axis> =
block|
inline|
x|
y

<view-timeline-inset> =
[[auto|<length-percentage>]{1,2}]#

<integer> =
<number-token>

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

<length-percentage> =
<length>|
<percentage>

Exemplos

Nascer do Sol

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

<div></div>

: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.

<div></div>

: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 solgira gradualmente através de um arco-íris de cores. O tempo do sol, posição e cor são independentes.

<div></div>

: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 aslados esquerdo e direito da viewport. O sol permanece na janela de visualização mesmoembora 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.

<div></div>

: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);  }}

VejaUsando animações CSS para exemplos adicionais.

Especificações

Compatiblidade com navegadores

Veja também

• Usando animações CSS
• API JavaScriptAnimationEvent