Az animation-duration tulajdonság
A animation-duration tulajdonság beállítja
az animáció végrehajtási idejét.
Szintaxis
szelektor {
animation-duration: idő s vagy ms ban;
}
Értékek
| Érték | Leírás |
|---|---|
s |
Megadja az időt másodpercben (például 3s). |
ms |
Megadja az időt ezredmásodpercben (például 3ms). Egy másodperc 1000 ezredmásodperc. |
Alapértelmezett érték: 0s.
Példa
Ebben a példában az animáció
3 másodpercig fog lejátszódni:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Lásd még
-
a
animation-nametulajdonság,
amely megadja az animáció nevét -
a
animation-delaytulajdonság,
amely megadja a késleltetést az animáció végrehajtása előtt -
a
animation-timing-functiontulajdonság,
amely megadja az animáció végrehajtási sebességét -
a
animation-iteration-counttulajdonság,
amely megadja az animáció ismétlésének számát -
a
animation-directiontulajdonság,
amely megadja az animáció irányát -
a
animation-fill-modetulajdonság,
amely megadja az animáció állapotát -
a
animation-play-statetulajdonság,
amely lehetővé teszi az animáció szüneteltetését -
a
animationtulajdonság,
ami egy rövidítés az animációkhoz -
a
@keyframesparancs,
amely megadja az animáció kulcsképeit -
a
transitionsima átmenetek,
amelyek elem fölé húzásra történő animációt jelentenek
