In this post i going to tell you how to set the simple animated moving background image using css3 keyframe and animation properties. This is one of the simple css3 trick to set the moving bg to webpages.
In this example i am going to set the 10s animation background movements. This also interesting concept. The below example shows you the animated background movements you can set the animation speed as your wish. The live demo available here you can check it now. I hope this post is very helpful.
In this example i am going to set the 10s animation background movements. This also interesting concept. The below example shows you the animated background movements you can set the animation speed as your wish. The live demo available here you can check it now. I hope this post is very helpful.
Html Code for Moving Background Image:
<body class="background-moving-bg">
<div class="container">
<h1>How to set Moving Background image using css3 with the help of keyframes and animation tags.</h1>
<h2><a href="http://www.sanwebcorner.com">www.sanwebcorner.com</a></h2>
</div>
</body>
Css for Moving Background Image:
.container{
width:60%;
background:rgba(255,255,255,0.75);
padding:25px;
margin-left:auto;
margin-right:auto;
min-height:500px;
border:1px solid #f1f1f1;
}
@-webkit-keyframes set-bg-movement{
0%{background-position:50% 0}
100%{background-position:50% -230px}
}
@-moz-keyframes set-bg-movement{
0%{background-position:50% 0}
100%{background-position:50% -230px}
}
@-ms-keyframes set-bg-movement{
0%{background-position:50% 0}
100%{background-position:50% -230px}
}
@keyframes set-bg-movement{
0%{background-position:50% 0}
100%{background-position:50% -230px}}
.background-moving-bg{
background: url(moving-bg.jpg) 0 0;
webkit-animation: set-bg-movement 10s linear 0s infinite normal;
-moz-animation: set-bg-movement 10s linear 0s infinite normal;
-ms-animation: set-bg-movement 10s linear 0s infinite normal;
-o-animation: set-bg-movement 10s linear 0s infinite normal;
animation: set-bg-movement 10s linear 0s infinite normal;
}
0 Comments