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.

@keyframes bganimation {
from { background-position: 0 0; }
to { background-position: 100% 0; }
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;
<div id="bg"></div>

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

About the Author


Software Engineer, Blogger etc., Visit my Youtube channel - <a href="http://www.youtube.com/agurchand">Click Here</a>

1 thought on “Learn how to animate Background using CSS!

Leave a Reply

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