Learn to float div
Floating div animate div
through this simple css trick you can animate div or image on your website
<head>
<style>
.floatbottomdiv {
background: orange;
position: relative;
-webkit-animation: roshan 3s; /* Safari 4.0 - 8.0 */
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation: roshan 3s;
animation-fill-mode: forwards;
border: 1px solid black;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes roshan {
from {top: 0px;}
to {top: 200px; }
}
@keyframes roshan {
from {top: 0px;}
to {top: 200px;}
}
/* second */
.floatbottomdiv2 {
background: red;
position: relative;
-webkit-animation: roshan2 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation: roshan2 4s;
animation-fill-mode: forwards;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes roshan2 {
from {left:400px; top: 0px;}
to { left:850px; top: 500px; }
}
@keyframes roshan2 {
from {left:400px; top: 0px;}
to { left:850px; top: 500px; }
}
</style>
</head>
<body>
<div class="floatbottomdiv2" style="width: 100px;
height: 100px;">
</div>
<div class="floatbottomdiv" style="width: 300px; height: 300px;">
Hi.. <br/>
How May I help You
<form >
<input type="text" name="query">
<input type="submit" value="Ask Query ?">
</form>
</div>
<center>Smart Trick </center>
</body>
Floating div animate div
through this simple css trick you can animate div or image on your website
<head>
<style>
.floatbottomdiv {
background: orange;
position: relative;
-webkit-animation: roshan 3s; /* Safari 4.0 - 8.0 */
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation: roshan 3s;
animation-fill-mode: forwards;
border: 1px solid black;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes roshan {
from {top: 0px;}
to {top: 200px; }
}
@keyframes roshan {
from {top: 0px;}
to {top: 200px;}
}
/* second */
.floatbottomdiv2 {
background: red;
position: relative;
-webkit-animation: roshan2 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation: roshan2 4s;
animation-fill-mode: forwards;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes roshan2 {
from {left:400px; top: 0px;}
to { left:850px; top: 500px; }
}
@keyframes roshan2 {
from {left:400px; top: 0px;}
to { left:850px; top: 500px; }
}
</style>
</head>
<body>
<div class="floatbottomdiv2" style="width: 100px;
height: 100px;">
</div>
<div class="floatbottomdiv" style="width: 300px; height: 300px;">
Hi.. <br/>
How May I help You
<form >
<input type="text" name="query">
<input type="submit" value="Ask Query ?">
</form>
</div>
<center>Smart Trick </center>
</body>
No comments:
Post a Comment