[英]CSS3 Animating position
考虑使用船舶在蓝色div上方移动的CSS3动画。 由于某种原因,船没有移动。 HTML如下:
<div id="wrapper">
<div id="sea">
<img src="ship.png" alt="ship" width="128" height="128"/>
</div>
</div>
为了制作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;}
}
}
船舶图像没有移动。 任何帮助是极大的赞赏。
你必须在css选择器之外声明你的关键帧,以及为绝对定位的元素设置动画。
你修改过的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;}
}
要使用left
, top
, bottom
或right
动画处理,您必须具有绝对定位或浮动元素。 所以,将位置改为absolute
。
此外,在您开始声明关键帧之前,还有未闭合的大括号}
。
#sea img {
position:absolute;
/* ... */
}
大括号错误:
#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.
这是一个工作演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.