Siden er opdateret 11. 8. 2013
Med animation kan man definere forskelligt om animationen.
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:minanimation;
animation-duration:5s;
}
@keyframes minanimation
{
from {left:0px;}
to {left:200px;}
}
Sætter navnet "minanimation" på animationen
animation-duration:2s;
Definerer, at animationen skal køres på 2 sekunder
animation-timing-function:linear;
Animationen kører med fast hastighed. Alle muligheder:
animation-delay:2s;
Animationen starter 2 sekunder efter siden er indlæst
animation-iteration-count:3;
Animationen køres 3 gange. Alternativt defineres animation-iteration-count:infinite; og animationen gentages uendeligt.
div {
width:100px;
height:50px;
background:black;
position:relative;
animation:minanimation 10s infinite;
animation-direction:alternate; <= denne linje definerer, at retningen skifter frem og tilbage mellem øverst til venstre og nederst til venstre
}
@keyframes minanimation { linjerne herunder definerer startpunktet, de enkelte "mellemstationer", slutpunktet og deres farve
0% {background:black; left:0px; top:0px;}
14% {background:navy; left:400px; top:0px;}
28% {background:red; left:400px; top:30px;}
42% {background:magenta; left:0px; top:30px;}
56% {background:green; left:0px; top:60px;}
70% {background:cyan; left:400px; top:60px;}
85% {background:yellow; left:400px; top:90px;}
100% {background:white; left:0px; top:90px;}
}
Animationen skifter retning. Det vil se sådan ud:
Mulige værdier for animation-direction er:
Med javascript kan der skiftes mellem paused og running.
animation-play-state:paused;
Animationen er stoppet.
animation-play-state:running;
Animationen kører.