animation
=========

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

Experimente
-----------

Propriedades constituintes
--------------------------

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

* `animation-delay`
* `animation-direction` (en-US)
* `animation-duration` (en-US)
* `animation-fill-mode` (en-US)
* `animation-iteration-count` (en-US)
* `animation-name` (en-US)
* `animation-play-state` (en-US)
* `animation-timing-function` (en-US)
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:

* 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 ser `none`, um `<custom-ident>` (en-US) ou uma `<string>` (en-US)
### Valores

`<single-easing-function>`

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

`<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` (en-US).

`<single-animation-direction>`

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

`<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` (en-US).

`<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` (en-US).

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` (en-US) , 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` (en-US) 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` (en-US) 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 (en-US) 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 (en-US)
* Entendendo o Critério de Sucesso 2.2.2 | W3C Understanding WCAG 2.0
Definição formal
----------------

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `animation-name` (en-US): `none`
* `animation-duration` (en-US): `0s`
* `animation-timing-function` (en-US): `ease`
* `animation-delay`: `0s`
* `animation-iteration-count` (en-US): `1`
* `animation-direction` (en-US): `normal`
* `animation-fill-mode` (en-US): `none`
* `animation-play-state` (en-US): `running`
* `animation-timeline` (en-US): `auto`
 |
| Aplica-se a | all elements |
| Inherited | não |
| Computed value | as each of the properties of the shorthand:* `animation-name` (en-US): as specified
* `animation-duration` (en-US): as specified
* `animation-timing-function` (en-US): as specified
* `animation-delay`: as specified
* `animation-direction` (en-US): as specified
* `animation-iteration-count` (en-US): as specified
* `animation-fill-mode` (en-US): as specified
* `animation-play-state` (en-US): as specified
* `animation-timeline` (en-US): a list, each item either a case-sensitive CSS identifier or the keywords `none`, `auto`
 |
| Animation type | Not animatable |

Sintaxe formal
--------------
```

animation =   
  <single-animation># (en-US)    
  
<single-animation> =   
  <time [0s,∞]>                       || (en-US)  
  <easing-function>                   || (en-US)  
  <time>                              || (en-US)  
  <single-animation-iteration-count>  || (en-US)  
  <single-animation-direction>        || (en-US)  
  <single-animation-fill-mode>        || (en-US)  
  <single-animation-play-state>       || (en-US)  
  [ (en-US) none | (en-US) <keyframes-name> ] (en-US)           
  
<easing-function> =   
  linear                          | (en-US)  
  <linear-easing-function>        | (en-US)  
  <cubic-bezier-easing-function>  | (en-US)  
  <step-easing-function>            
  
<single-animation-iteration-count> =   
  infinite        | (en-US)  
  <number [0,∞]>    
  
<single-animation-direction> =   
  normal             | (en-US)  
  reverse            | (en-US)  
  alternate          | (en-US)  
  alternate-reverse    
  
<single-animation-fill-mode> =   
  none       | (en-US)  
  forwards   | (en-US)  
  backwards  | (en-US)  
  both         
  
<single-animation-play-state> =   
  running  | (en-US)  
  paused     
  
<keyframes-name> =   
  <custom-ident> (en-US)  | (en-US)  
  <string> (en-US)          
  
<linear-easing-function> =   
  linear( <linear-stop-list> )    
  
<cubic-bezier-easing-function> =   
  ease                                                | (en-US)  
  ease-in                                             | (en-US)  
  ease-out                                            | (en-US)  
  ease-in-out                                         | (en-US)  
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )    
  
<step-easing-function> =   
  step-start                             | (en-US)  
  step-end                               | (en-US)  
  steps( <integer> (en-US) , <step-position>? (en-US) )    
  
<linear-stop-list> =   
  [ (en-US) <linear-stop> ] (en-US)# (en-US)    
  
<step-position> =   
  jump-start  | (en-US)  
  jump-end    | (en-US)  
  jump-none   | (en-US)  
  jump-both   | (en-US)  
  start       | (en-US)  
  end           
  
<linear-stop> =   
  <number>               && (en-US)  
  <linear-stop-length>? (en-US)    
  
<linear-stop-length> =   
  <percentage> (en-US){1,2} (en-US)    
  
```

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 with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Usando animações CSS
* API JavaScript `AnimationEvent`