4

こんにちは、CSS を使用して画像を画面上に移動しようとしています。現在、実行すると、ページの上部に表示されます。これが私が試しているコードです。これをクロムで実行しようとしています。

<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>
4

3 に答える 3

9

これを試して：

実施例

#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;
    }
}
于 2013-05-28T17:03:54.997 に答える
0

これを変える

animation: floatBubble 2s inifnate;

これに

animation: floatBubble 25s infinite;

また、画面の上に移動しようとしている場合は、 500px ではなく -500px に変更します

于 2013-05-28T16:39:04.653 に答える