Właściwość animation
Właściwość animation - to właściwość
skrótowa dla animacji, pozwala ustawić
wszystkie właściwości dla animacji jednocześnie: animation-name,
animation-duration,
animation-delay,
animation-timing-function,
animation-iteration-count,
animation-direction,
animation-fill-mode,
animation-play-state.
Kolejność wartości nie ma znaczenia, czas trwania
animacji animation-duration koniecznie
musi stać przed opóźnieniem animation-delay.
Obowiązkowe są tylko właściwości animation-name
i animation-duration.
Właściwość może również przyjmować wartość none,
która całkowicie wyłącza animację. Ta
wartość jest wartością domyślną.
Składnia
selektor {
animation: wartości;
}
Przykład
W tym przykładzie przed animacją będzie opóźnienie
3 sekund (przed każdym nowym odtworzeniem),
a następnie animacja będzie odtwarzana przez
6 sekund:
<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;
}
:
Przykład . Możliwe problemy
Animacja zapisana w formie skrótowej może nie działać z powodu swojej nazwy. Przyjrzyjmy się następującej animacji:
@keyframes reverse {
from {
left: 0;
}
to {
left: 300px;
}
}
Zauważ, używam nazwy animacji reverse.
Na pierwszy rzut oka, wszystko w porządku, ale animacja
nie działa, ponieważ reverse - prawidłowe
słowo kluczowe dla właściwości animation-direction.
Również animacja nie będzie działać przy użyciu w formie skrótowej w nazwie innych słów kluczowych. Ale wszystko działa dobrze przy użyciu "pełnej" formy opisu.
Do słów kluczowych-wartości animation-direction,
psującymi animacje, warto zaliczyć i słowa
kluczowe, odnoszące się do funkcji wygładzania,
a także infinite, alternate,
running, paused i tak dalej.
Zobacz też
-
regułę
@keyframes,
ustawiającą klatki kluczowe animacji -
płynne przejścia
transition, reprezentujące animację po najechaniu na element