animation css3

10  16  12.1

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:

linear
fast hastighed
ease
default værdi - start blødt, sæt farten op og brems blødt ned
ease-in
start blødt og sæt farten op
ease-out
kør fuld fart og sæt farten ned mod slut
ease-in-out
samme som ease

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:

normal
Animationen køres fra venstre mod højre og/eller oppefra og ned
reverse
Animationen køres modsat normalt
alternate
Animationen køres oppefra/fra venstre og skifter ved slut tilbage til startpunktet
alternate-reverse
Animationen køres nedefra/fra højre og skifter ved slut tilbage til startpunktet

Med javascript kan der skiftes mellem paused og running.

animation-play-state:paused;

Animationen er stoppet.

animation-play-state:running;

Animationen kører.

Valid XHTML og CSS / Copyright © Erik Ginnerskov august 2013
Hjemmesideskolen
Du er her: Forsiden - css - egenskaber - animation
sidens top
Brugere lige nu: 1
Home Mail