Az animation-name tulajdonság
Az animation-name tulajdonság megadja az animáció (vagy animációk) nevét, amelyet az adott elemre alkalmazni kell. Az animáció nevének meg kell egyeznie azzal, amelyet a @keyframes kulcskockák definiálásakor állítottak be.
Szintaxis
szelektor {
animation-name: animáció neve;
}
Példa
Ebben a példában az animáció neve 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;
}
:
Lásd még
-
a
animation-durationtulajdonság,
amely megadja az animáció időtartamát -
a
animation-delaytulajdonság,
amely megadja az animáció megkezdése előtti késleltetést -
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,
amely az animációk rövidítése -
a
@keyframesparancs,
amely megadja az animáció kulcskockáit -
a
transitionsima átmenetek, amelyek az elem fölé húzás animációját jelentik
