Veturia animation
Veturia animation është një veturi
e shkurtuar për animacion, lejon të përcaktohen
të gjitha vetitë për animacion njëkohësisht: animation-name,
animation-duration,
animation-delay,
animation-timing-function,
animation-iteration-count,
animation-direction,
animation-fill-mode,
animation-play-state.
Rendi i vlerave nuk ka rëndësi, koha e ekzekutimit
të animacionit animation-duration duhet patjetër
të vendoset para vonesës animation-delay.
Vetitë e detyrueshme janë vetëm animation-name
dhe animation-duration.
Veturia mund të marrë gjithashtu vlerën none,
e cila çaktivizon animacionin plotësisht. Kjo
vlerë është vlera e paracaktuar.
Sintaksa
përzgjedhësi {
animation: vlerat;
}
Shembull
Në këtë shembull, para animacionit do të ketë një vonesë
prej 3 sekondash (para çdo luajtjeje të re),
e më pas animacioni do të luhet për
6 sekonda:
<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;
}
:
Shembull . Problemet e mundshme
Animacioni, i shkruar në formë të shkurtër, mund të mos funksionojë për shkak të emrit të tij. Le të shqyrtojmë animacionin e mëposhtëm:
@keyframes reverse {
from {
left: 0;
}
to {
left: 300px;
}
}
Vini re, unë po përdor emrin e animacionit reverse.
Në shikim të parë, gjithçka duket mirë, por animacioni
nuk funksionon, sepse reverse është një
fjalë kyçe e vlefshme për veturinë animation-direction.
Gjithashtu animacioni nuk do të funksionojë kur përdoret në formë të shkurtër në emër fjalëve kyçe të tjera. Por gjithçka funksionon mirë kur përdoret forma "e plotë" e përshkrimit.
Fjalëve kyçe-vlera animation-direction,
që prishin animacionet, u përkasin edhe fjalët
kyçe që i përkasin funksioneve të zbutjes,
si dhe infinite, alternate,
running, paused e kështu me radhë.
Shihni gjithashtu
-
komandën
@keyframes,
që përcakton kornizat kryesore të animacionit -
tranzicionet e qeta
transition, që përfaqësojnë një animacion me hover mbi elementin
