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:
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:
- 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: |
---|---|
Aplica-se a | all elements |
Inherited | não |
Computed value | as each of the properties of the shorthand:
|
Animation type | Not animatable |
Sintaxe formal
animation =
<single-animation># (en-US)
<single-animation> =
<time> || (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) [ (en-US), <step-position> ] (en-US)? (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
Veja também
- Usando animações CSS
- API JavaScript
AnimationEvent