Propriedade animation

A propriedade animation é uma propriedade abreviada para animação, permite definir todas as propriedades para animação simultaneamente: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

A ordem dos valores não importa, o tempo de duração da animação animation-duration obrigatoriamente deve estar antes do atraso animation-delay. As únicas propriedades obrigatórias são animation-name e animation-duration.

A propriedade também pode receber o valor none, que desativa a animação completamente. Este valor é o valor padrão.

Sintaxe

cssseletor {
  animation: valores;
}

Exemplo

Neste exemplo, haverá um atraso de 3 segundos antes da animação (antes de cada nova reprodução), e então a animação será reproduzida por 6 segundos:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation: move 6s infinite 3s linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Exemplo . Possíveis problemas

Uma animação, escrita na forma abreviada, pode não funcionar devido ao seu nome. Vamos considerar a seguinte animação:

css@keyframes reverse {
  from {
    left: 0;
  }
  to {
    left: 300px;
  }
}

Observe, estou usando o nome de animação reverse. À primeira vista, tudo está bem, mas a animação não funciona, porque reverse é uma palavra-chave válida para a propriedade animation-direction.

A animação também não funcionará ao usar na forma abreviada no nome outras palavras-chave. Mas tudo funciona bem ao usar a forma "completa" de descrição.

Entre as palavras-chave de valor animation-direction que quebram as animações, devem ser consideradas também as palavras-chave relacionadas às funções de easing, assim como infinite, alternate, running, paused e assim por diante.

Veja também