Learn how to animate Background using CSS!

In this tutorial we are going to see how we canĀ animate the background image using simple CSS3 Animation code.

See the below simple working example, Just copy and paste and have fun.


<html>
<head>
<style>
@keyframes bganimation {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#bg{
width: 1000px;
height: 100px;
background-image: url(http://www.theonlytutorials.com/demo/images/zigzag.jpg);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: bganimation 10s linear infinite;
}
</style>
</head>
<body>
<div id="bg"></div>
</body>
</html>

NOTE: CSS3 Animation will work in New Version Browsers Only. Sadly this animation Doesn’t work in IE9 and below version.

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *