Animasjon

Hva

Animasjon

MERK at denne modulen er under arbeid, det kommer mer....

Går ikke bra i IE og Opera ?

Animasjonen ovenfor er styrt av følgende stildefinisjon:

div#mover
{
width:62px; height:62px;
background-image:url('http://www.it.hiof.no/~borres/allround/selfimages/bs1.gif');
background-repeat:no-repeat;
position:relative;
animation:mymove 7s infinite;
-moz-animation:mymove 7s infinite;
-webkit-animation:mymove 7s infinite;
animation-direction:alternate;
-moz-animation-direction:alternate;
-webkit-animation-direction:alternate;
}
@keyframes mymove {from{left:0px;} to{left:600px;}}
@-moz-keyframes mymove { from{left:0px;} to{left:600px;} }
@-webkit-keyframes mymove { from{left:0px;} to{left:600px;}
}

Mer om potensialet i Smashing Magazine [1] .

Referanser

The Guide To CSS Animation Smashing Magazine coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/ 14-10-2011

CSS W3C www.w3.org/TR/CSS/ 14-10-2011

Vedlikehold

Børre Stenseth, oktober 2011

( Velkommen ) CSS > Eksempler >Eksempel 4 ( Eksempel 5 )