Question

您好我正在尝试使用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>

Answer 1

试试这个：

<强> 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;
    }
}

Answer 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

Answer 3

更改此

animation: floatBubble 2s inifnate;

到这个

animation: floatBubble 25s infinite;

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

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

3 个答案: