23 Aug 2015

keyframes example using HTML and CSS3

No comments  
create HTML file for keyframes example  using HTML and CSS3 :

<html>
<head><title></title>
<style type="text/css">
.object{width:150px;height:150px;position:relative;background-color:#000;
-webkit-animation:objectmove 5s infinite;
animation:objectmove 5s infinite;}
@-webkit-keyframes objectmove{
0% {top:0px;left:0px;background-color:#000}
25% {top:0px;left:300px;background-color:red}
50% {top:300px;left:300px;background-color:blue}
75% {top:300px;left:0px;background-color:green}
100% {left:0px;top:0px;background-color:#ccc}
}
@keyframes objectmove{
0% {top:0px;left:0px;background-color:#000}
25% {top:0px;left:300px;background-color:red}
50% {top:300px;left:300px;background-color:blue}
75% {top:300px;left:0px;background-color:green}
100% {left:0px;top:0px;background-color:#000}
}
}
</style>
</head>
<body>
<div class="object">

</div>
</body>
</html>

NOTE: output image attached 


Share:

0 comments:

Post a Comment