Create Animated Background Using CSS3

Datetime:2016-08-23 03:07:03          Topic: CSS3           Share

Tags:-CSS3 HTML

In this tutorial we will show you how to create animated background using CSS3.Whenever user opens the webpage the background image of a webpage scrolls from right to left it looks very beautiful it gave moving effect to the user.

See Demo

To Create Animated Background It Takes Only One Step:-

  1. Make a HTML file and define markup and styling

Step 1.Make a HTML file and define markup and styling

We make a HTML file and save it with a name animate.html

<html>
<head>
<style>
body
{
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:100%;
}
#animated_div
{
width: 100%;
height: 100%;
background: url(images/animated_background.jpg) repeat-x;
background-size:cover;
-webkit-animation: animatebackground 60s linear infinite;
animation: animatebackground 60s linear infinite;
-ms-animation: animatebackground 60s linear infinite;
-moz-animation: animatebackground 60s linear infinite;
}
@keyframes animatebackground 
{
 from {background-position: 0 0;}
 to {background-position: -1000px 0;}
}
@-webkit-keyframes animatebackground 
{
 from {background-position: 0 0;}
 to {background-position: -1000px 0;}
}
@-ms-keyframes animatebackground 
{
 from {background-position: 0 0;}
 to {background-position: -1000px 0;}
}
@-moz-keyframes animatebackground 
{
 from {background-position: 0 0;}
 to {background-position: -1000px 0;}
}
#animated_div h1
{
 color:white;
 padding-top:100px;
 font-size:50px;
}
#animated_div h1 p
{
 font-size:20px;
}
</style>
</head>
<body>
<div id="wrapper">
 <div id="animated_div">
  <h1>Animated Background Using CSS3</h1>
 </div>
</div>
</body>
</html>

In this step create a div which is animated div which scrolls from right to left.In our CSS we set background image to animated div and then use CSS3 animaton to scroll the div from right to left and then we use CSS3 keyframes and set the movement from 0 to -1000px so that the images first move to -1000px then start again you can use any number but it is recommended to use higher number to avoid quick restart.

Thats all, this is how to create animated background using CSS3 and HTML.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.





About List