Īpašība animation
Īpašība animation ir īpašību
saīsinājums animācijai, kas ļauj iestatīt
visas animācijas īpašības vienlaicīgi: animation-name,
animation-duration,
animation-delay,
animation-timing-function,
animation-iteration-count,
animation-direction,
animation-fill-mode,
animation-play-state.
Vērtību secībai nav nozīmes, animācijas izpildes laiks
animation-duration obligāti
jānovieto pirms aizkaves animation-delay.
Obligātas ir tikai īpašības animation-name
un animation-duration.
Īpašība var arī pieņemt vērtību none,
kas pilnībā atslēdz animāciju. Šī
vērtība ir noklusējuma vērtība.
Sintakse
selector {
animation: vērtības;
}
Piemērs
Šajā piemērā pirms animācijas būs aizkave
3 sekundes (pirms katras jaunas atskaņošanas),
un pēc tam animācija tiks atskaņota
6 sekundes:
<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;
}
:
Piemērs . Iespējamās problēmas
Animācija, kas ierakstīta īsajā formā, var nedarboties savas nosaukuma dēļ. Apskatīsim šādu animāciju:
@keyframes reverse {
from {
left: 0;
}
to {
left: 300px;
}
}
Ievērojiet, es izmantoju animācijas nosaukumu reverse.
No pirmā acu uzmetiena, viss ir labi, bet animācija
nedarbojas, jo reverse ir derīgs
atslēgvārds īpašībai animation-direction.
Arī animācija nedarbosies, ja īsajā formā tiks izmantoti citi atslēgvārdi nosaukumā. Bet viss labi darbojas, izmantojot "pilno" apraksta formu.
Pie atslēgvārdiem-vērtībām animation-direction,
kas salauž animācijas, vajadzētu pieskaitīt arī atslēgvārdus,
kas attiecas uz gludināšanas funkcijām,
kā arī infinite, alternate,
running, paused un tā tālāk.
Skatiet arī
-
komandu
@keyframes,
kas nosaka animācijas galvenos kadrus -
gludās pārejas
transition, kas ir animācija, kad kursors tiek novietots virs elementa