Geek Answers Handbook

CSS3 Animated Position

Consider a CSS3 animation with a ship moving over a blue div. For some reason, the ship does not move. HTML is as follows:

<div id="wrapper"> <div id="sea"> <img src="ship.png" alt="ship" width="128" height="128"/> </div> </div>

To create a CSS3 animation, I use the following:

 #wrapper { position:relative;top:50px;width:700px;height:320px; margin:0 auto;background:white;border-radius:10px;} #sea { position:relative;background:#2875DE;width:700px;height:170px; border-radius:10px;top:190px; } #sea img { position:relative;left:480px;top:-20px; animation:myship 10s; -moz-animation:myship 10s; /* Firefox */ -webkit-animation:myship 10s; /* Safari and Chrome */ @keyframes myship { from {left: 480px;} to{left:20px;} } @-moz-keyframes myship { from {left: 480px;} to {left:20px;} } @-webkit-keyframes myship { from {left: 480px;} to{left:20px;} } }

The image of the ship does not move. Any help is appreciated.

+7
source share
2 answers

you must declare your keyframe outside the css selector, and also animate an absolutely positioned element.

http://jsfiddle.net/aNvSf/

your modified css looks like this:

 #wrapper{ position:relative; top:50px; width:700px; height:320px; margin:0 auto; background:white; border-radius:10px; } #sea{ position:relative; background:#2875DE; width:700px; height:170px; border-radius:10px; top:190px; } #sea img{ position:absolute; left:480px; top:-20px; animation:myship 10s; -moz-animation:myship 10s; /* Firefox */ -webkit-animation:myship 10s; /* Safari and Chrome */ } @keyframes myship{ from {left: 480px;} to{left:20px;} } @-moz-keyframes myship{ from {left: 480px;} to{left:20px;} } @-webkit-keyframes myship{ from {left: 480px;} to{left:20px;} }​
+9
source

To animate with left , top , bottom or right you must have an absolutely positioned or floating element. SO, change position to absolute .

Also, before you started declaring keyframes, there were unlocked braces } .

 #sea img { position:absolute; /* ... */ }

Bracket Error:

  #sea img{ position:absolute; /* absolute */ left:480px;top:-20px; animation:myship 10s; -moz-animation:myship 10s; /* Firefox */ -webkit-animation:myship 10s; /* Safari and Chrome */ } /* ^ You have to close the braces here, before declaring the keyframes.

Here is a working demo

+2
source

More articles:


All Articles