Својство 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,
која потпуно искључује анимацију. Ова
вредност је подразумевана вредност.
Синтакса
селектор {
animation: вредности;
}
Пример
У овом примеру пре анимације ће бити одлагање
од 3 секунде (пре сваког новог покретања),
а затим ће се анимација приказивати током
6 секунди:
<div id="elem"></div>
@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;
}
:
Пример . Могући проблеми
Анимација, записана у скраћеној форми, може да не ради због свог назива. Хајде да размотримо следећу анимацију:
@keyframes reverse {
from {
left: 0;
}
to {
left: 300px;
}
}
Приметите, ја користим назив анимације reverse.
На први поглед, све је у реду, али анимација
не ради, јер је reverse валидна
кључна реч за својство animation-direction.
Такође анимација неће радити при коришћењу у скраћеној форми ако се у називу користе друге кључне речи. Али све добро ради при коришћењу "пуне" форме описа.
Кључним речима-вредностима animation-direction,
које могу да покваре анимације, треба прикључити и кључне
речи које припадају функцијама ублажавања,
као и infinite, alternate,
running, paused и тако даље.
Види још
-
команду
@keyframes,
која задаје кључне кадрове анимације -
глатке транзиције
transition, које представљају анимацију при преласку преко елемента