Html CSS3 动画位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10424500/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 Animating position
提问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 上方移动的 CSS3 动画。由于某种原因，这艘船没有移动。HTML如下：
<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:
为了制作 CSS3 动画，我使用以下内容：
#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.
船图像不动。任何帮助是极大的赞赏。
回答by Thomas Jones
you have to declare your keyframe outside the css selector, as well as animate an absolutely positioned element.
您必须在 css 选择器之外声明您的关键帧，并为绝对定位的元素设置动画。
your modified css looks like this:
您修改后的 css 如下所示：
#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;}
}?
回答by Starx
To animate with left, top, bottomor right, you either have to have a absolutely positioned or floated element. SO, Change the position to absolute.
与动画left，top，bottom或者right，你要么必须有一个绝对定位或浮动元素。SO，将位置更改为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
这是一个工作演示
