CSS 动画/使用@KEYFRAMES 在屏幕上移动图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16797187/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Animation/ Moving an image up the screen with @KEYFRAMES
提问by user2241862
Hi I am trying to move a image up the screen using CSS. Currently when I run it just appears at the top of the page. Here is the code I am trying. I am trying to run this in chrome.
嗨，我正在尝试使用 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>
回答by apaul
Try this:
尝试这个：
#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;
}
}
回答by Arpit
Check this out :
看一下这个 ：
CSS:
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>
I think this is what you want ;)
我认为这就是你想要的;)
回答by bob
change this
改变这个
animation: floatBubble 2s inifnate;
to this
对此
animation: floatBubble 25s infinite;
also, if you're trying to move it UP the screen, instead of 500px , change to -500px
此外，如果您尝试将其向上移动到屏幕上，而不是 500px ，请更改为 -500px
