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(https://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.
I’m looking for a slider that I can add text on one side and image on another, please help