May 3, 2012
CSS3 Animating position
Question by George
Consider CSS3 animation with ship moving above blue div. For some reason the ship isn’t moving. The HTML is as follows:
<div id="wrapper">
<div id="sea">
<img src="ship.png" alt="ship" width="128" height="128"/>
</div>
</div>
In order to make 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 ship image isn’t moving. Any help is greatly appreciated.
Answer by Kirean
you have to declare your keyframe outside the css selector, as well as animate an absolutely positioned element.
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;}
}
Answer by Starx
To animate with left, top, bottom or right, you either have to have a absolutely positioned or floated element. SO, Change the position to absolute.
Also, there was as unclosed braces } before you started to declare the keyframes.
#sea img {
position:absolute;
/* ... */
}
Braces 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
