Ominaisuus animation-duration
Ominaisuus animation-duration asettaa
animaation keston.
Syntaksi
valitsija {
animation-duration: aika s tai ms;
}
Arvot
| Arvo | Kuvaus |
|---|---|
s |
Asettaa ajan sekunneissa (esimerkiksi 3s). |
ms |
Asettaa ajan millisekunneissa (esimerkiksi 3ms). Yksi sekunti on 1000 millisekuntia. |
Oletusarvo: 0s.
Esimerkki
Tässä esimerkissä animaatio toistetaan
3 sekunnin ajan:
<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;
}
:
Katso myös
-
ominaisuus
animation-name,
joka asettaa animaation nimen -
ominaisuus
animation-delay,
joka asettaa viiveen ennen animaation suorittamista -
ominaisuus
animation-timing-function,
joka asettaa animaation nopeuden -
ominaisuus
animation-iteration-count,
joka asettaa animaation toistokertojen määrän -
ominaisuus
animation-direction,
joka asettaa animaation suunnan -
ominaisuus
animation-fill-mode,
joka asettaa animaation tilan -
ominaisuus
animation-play-state,
joka mahdollistaa animaation pysäyttämisen -
ominaisuus
animation,
joka on lyhenne animaatioille -
komento
@keyframes,
joka määrittää animaation avainkehykset -
pehmeät siirtymät
transition, jotka edustavat animaatiota elementin päälle viedyssä tilassa