Translasjon

Hva

Vi kan lage animasjoner av ulik type i CSS. Det er ikke involvert noe JavaScript i eksemplene nedenfor.

Ok i din nettleser ? Bildet går fram og tilbake ? og opp og ned ?

Animasjonen ovenfor er styrt av følgende stildefinisjon:

div#mover
{
    width:62px; height:62px;
    background-image:url('bs5.png');
    background-repeat:no-repeat;
    position:relative;
    
        -moz-animation:mymove 7s infinite;
        -webkit-animation:mymove 7s infinite;
    animation:mymove 7s infinite;
    
        -moz-animation-direction:alternate;
        -webkit-animation-direction:alternate;
    animation-direction:alternate;
}
    @-moz-keyframes mymove { from{left:0px;} to{left:600px;} }
    @-webkit-keyframes mymove { from{left:0px;} to{left:600px;}}
@keyframes mymove {from{left:0px;} to{left:600px;}}

Denne vertikale animasjonen er styrt av følgende stildefinisjon:

div#moveragain
{
    width:63px; height:62px;
    background-image:url('bs8.png');
    background-repeat:no-repeat;
    position:relative;
    
        -moz-animation:mymove2 4s infinite;
        -webkit-animation:mymove2 4s infinite;
    animation:mymove2 4s infinite;
    
        -moz-animation-direction:alternate;
        -webkit-animation-direction:alternate;
    animation-direction:alternate;
}

    @-moz-keyframes mymove2 { from{top:-500px;} to{top:0px;} }
    @-webkit-keyframes mymove2 {  from{top:-500px;} to{top:0px;}}
@keyframes mymove2 { from{top:-500px;} to{top:0px;}}

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 (Cascading Style Sheets) W3C www.w3.org/TR/CSS/ 08-03-2014

CSS Browser support w3schools www.w3schools.com/cssref/css3_browsersupport.asp 28-03-2014