CSS动画/使用@KEYFRAMES在屏幕上移动图像

时间:2013-05-28 16:37:15

标签: css animation

您好我正在尝试使用CSS在屏幕上移动图像。目前,当我运行它时,它只显示在页面顶部。这是我正在尝试的代码。我试图在chrome中运行它。

<head>

<style>
#float{
width: 200px;
height: 500px;
position: relative;
animation: floatBubble 2s inifnate;
animation-directon: normal;
}


@keyframes floatBubble{
 0% {
        top:0;
        -webkit-animation-timing-function: ease-in;

   }


   100% {
      top: 500px;
      animation-timing-function: ease-out;
   }

}
</style>

</head>
<body  style="background-color:#FF9900; color:#CC0033; text-align:center">

<div id="float">
<img src ="bub.png" height="100px" width="100px" alt="bubbles">
</div>

</body>

3 个答案:

答案 0 :(得分:7)

试试这个:

<强> Working Example

#float {
    position: relative;
    -webkit-animation: floatBubble 2s infinite  normal ease-out;
    animation: floatBubble 2s infinite  normal ease-out;
}
@-webkit-keyframes floatBubble {
    0% {
        top:500px;
    }
    100% {
        top: 0px;
    }
}
@keyframes floatBubble {
    0% {
        top:500px;
    }
    100% {
        top: 0px;
    }
}

答案 1 :(得分:2)

检查出来:

CSS:

<style>
#float{
position: relative;
-webkit-animation: floatBubble 2s infinite;
    -webkit-animation-direction:alternate;
  }


@-webkit-keyframes floatBubble{
 from{
        top:0;
        -webkit-animation-timing-function: ease-in;

   }


   to {
      top: 200px;
      -webkit-animation-timing-function: ease-out;
   }

}
</style>

我认为这就是你想要的;)

Demo

答案 2 :(得分:0)

更改此

animation: floatBubble 2s inifnate;

到这个

animation: floatBubble 25s infinite;

另外,如果您尝试将其向上移动屏幕而不是500px,请更改为-500px