Animation-name xususiyati
animation-name xususiyati ushbu elementga qo‘llaniladigan
animatsiya (yoki animatsiyalar) nomini belgilaydi. Animatsiya nomi
asosiy kadrlar @keyframes
aniqlanganda belgilangan nom bilan bir xil bo‘lishi kerak.
Sintaksis
selektor {
animation-name: animatsiya nomi;
}
Misol
Ushbu misolda animatsiya nomi move:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation-name: move;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Shuningdek qarang
-
animation-durationxususiyati,
animatsiya davomiyligini belgilaydi -
animation-delayxususiyati,
animatsiyani bajarishdan oldin kechikishni belgilaydi -
animation-timing-functionxususiyati,
animatsiyani bajarish tezligini belgilaydi -
animation-iteration-countxususiyati,
animatsiya takrorlanishlar sonini belgilaydi -
animation-directionxususiyati,
animatsiya yo‘nalishini belgilaydi -
animation-fill-modexususiyati,
animatsiya holatini belgilaydi -
animation-play-statexususiyati,
animatsiyani pauzaga qo‘yish imkonini beradi -
animationxususiyati,
animatsiyalar uchun qisqartma hisoblanadi -
@keyframesbuyrug‘i,
animatsiya asosiy kadrlarini belgilaydi -
transitionsilliq o‘tishlar, elementga nishonlash asosidagi animatsiyani ifodalaydi