CSS3动画位置

7ajki6be 于 2023-05-02 发布在 CSS3

关注(0)|答案(2)|浏览(264)

考虑CSS3动画，船在蓝色div上移动。由于某种原因，船不动了。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

来源：https://stackoverflow.com/questions/10424500/css3-animating-position

2条答案

按热度按时间

0sgqnhkj1#

你必须在CSS选择器之外声明你的关键帧，以及动画一个绝对定位的元素。
http://jsfiddle.net/aNvSf/
修改后的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;} 
}

赞(0）回复(0）举报 2023-05-02

wz3gfoph2#

要使用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.

下面是一个工作的demo

赞(0）回复(0）举报 2023-05-02

我来回答

CSS3动画位置

2条答案

相关问题

热门标签

最新问答