Својство animation

Својство animation је својство скраћеница за анимацију, омогућава да се задају сва својства за анимацију истовремено: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Редослед вредности није битан, време трајања анимације animation-duration обавезно мора да стои пре одлагања animation-delay. Обавезним су само својства animation-name и animation-duration.

Својство може такође да прихвати вредност none, која потпуно искључује анимацију. Ова вредност је подразумевана вредност.

Синтакса

cssселектор {
  animation: вредности;
}

Пример

У овом примеру пре анимације ће бити одлагање од 3 секунде (пре сваког новог покретања), а затим ће се анимација приказивати током 6 секунди:

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

Результат:

Пример . Могући проблеми

Анимација, записана у скраћеној форми, може да не ради због свог назива. Хајде да размотримо следећу анимацију:

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

Приметите, ја користим назив анимације reverse. На први поглед, све је у реду, али анимација не ради, јер је reverse валидна кључна реч за својство animation-direction.

Такође анимација неће радити при коришћењу у скраћеној форми ако се у називу користе друге кључне речи. Али све добро ради при коришћењу "пуне" форме описа.

Кључним речима-вредностима animation-direction, које могу да покваре анимације, треба прикључити и кључне речи које припадају функцијама ублажавања, као и infinite, alternate, running, paused и тако даље.

Види још