animation

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 class="flex-column" id="default-example">
  <div id="example-element"></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 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> 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 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.

• 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} ]#  

<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 nasce para o centro da viewport e depois desaparece de vista.

<div class="sun"></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 class="sun"></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 sol gira gradualmente através de um arco-íris de cores. O tempo do sol, posição e cor são independentes.

<div class="sun"></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 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.

<div class="sun"></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);
  }
}

Veja Usando animações CSS para exemplos adicionais.

Especificações

Compatiblidade com navegadores

Veja também

• Usando animações CSS
• API JavaScript AnimationEvent