To show the image sliding ion background i have used two DIV here one act as a wrapper and another contains the background image that slides.
In the .wrapper div i have added "overflow:hidden" property that will make this div to hide anything that goes outside the wrapper.
The .bg-sliding div is the div that contains the background image, we have set the width of this div way more than the wrapper so that it should overflow the wrapper.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.wrapper {
overflow: hidden;
}
.bg-sliding {
background: url("bg.png") repeat-x;
height: 560px;
width: 3000px;
animation: slide 60s linear infinite;
}
@keyframes slide{
0%{
transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(-1000px, 0, 0);
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="sliding-background"></div>
</div>
</body>
</html>
Now to apply animation on the .bg-sliding div we have used the transform property. We have set the image to the left edge of the wrapper class before starting the animation.Now we apply animation to the bg-sliding div so that image moves from left to right.
AS my bg-sliding width is 3 times the width of the image i.e. 3000px the image will repeat 3 times itself between 0% to 100% before starting again to loop and this process goes on and on.
0 Comment(s)