CSS动画/使用@KEYFRAMES在屏幕上向上移动图像 [英] CSS Animation/ Moving an image up the screen with @KEYFRAMES
本文介绍了CSS动画/使用@KEYFRAMES在屏幕上向上移动图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用CSS在屏幕上向上移动图像。目前，当我运行它时，它仅显示在页面顶部。这是我正在尝试的代码。我正在尝试在chrome中运行。
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.
<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>
推荐答案
尝试一下：
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;
}
}
这篇关于CSS动画/使用@KEYFRAMES在屏幕上向上移动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
