Menu
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>
715
asked Dec 20 '22 05:12
Try this:
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;
}
}
Check this out :
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 ;)
Demo
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
