Ominaisuus animation-name
Ominaisuus animation-name asettaa nimen
animaatiolle (tai animaatioille), jota käytetään
kyseisellä elementillä. Animaation nimen on oltava
sama kuin mitä on määritelty avainkehysten
määrittelyssä @keyframes.
Syntaksi
valitsija {
animation-name: animaation-nimi;
}
Esimerkki
Tässä esimerkissä animaation nimi on 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;
}
:
Katso myös
-
ominaisuus
animation-duration,
joka asettaa animaation keston -
ominaisuus
animation-delay,
joka asettaa viiveen ennen animaation suorittamista -
ominaisuus
animation-timing-function,
joka asettaa animaation suoritusnopeuden -
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 animaion pysäyttämisen -
ominaisuus
animation,
joka on lyhenne animaatioille -
komento
@keyframes,
joka määrittää animaation avainkehykset -
sujuvat siirtymät
transition, jotka edustavat elementin päälle viedyn kursorin aiheuttamaa animaatiota