Create CSS3 Animation Webpage Using Animation And Transform Effects

Share:

Create CSS3 Animation Webpage Using Animation And Transform Effects. If you have studied the CSS code, you will find some CSS code like animation, and transform. CSS code is at the CSS3 version, which we can use to create an animation effect on a webpage. As an example of the use of CSS3 effects of this code, you can read the tutorial below will explain how to create a web page with the help of pure CSS animation code.
Create CSS3 Animation Webpage Using Animation And Transform Effects

Create CSS3 Animation Webpage Using Animation And Transform Effects

Download Now Create CSS3 Animation Webpage Using Animation And Transform Effects

Right away, let’s discuss about how to create a CSS animation on a web page. The following detailed explanation :
Create CSS3 Animation Webpage Using Animation And Transform Effects
To create animation on a webpage, we need an image and this image will be given the animation effects and also transform the image in order to move the way we want. An example is the cloud image below…
Html code for the cloud : <div class="cloud effect"></div>
The following css code to make the image cloud can move from left to right :

.cloud{
	width: 400px;
	height: 100px;
	background:url('http://4.bp.blogspot.com/-05YohdWKKdU/UoN7vm8c9PI/AAAAAAAABKU/tK7cZGWm1b0/s1600/Tutorial+World+Edu+Create+CSS+Multiple+Background+Images+For+Website+4.png') no-repeat;
	border-radius: 300px;
	position: relative;
	z-index: 9999;
}
.effect{
	left: 200px;
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	-ms-transform: scale(0.6);
	transform: scale(0.6);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60);
	opacity: 0.6;
	-webkit-animation: move-animation 25s linear infinite;
	-moz-animation: move-animation 25s linear infinite;
	-ms-animation: move-animation 25s linear infinite;
	-o-animation: move-animation 25s linear infinite;
	animation: move-animation 25s linear infinite;
}
@-webkit-keyframes move-animation{
	0% { margin-left: 1280px;}
	100%{margin-left: -1280px;}
}
@-moz-keyframes move-animation{
	0% { margin-left: 1280px;}
	100%{margin-left: -1280px;}
}
@-o-keyframes move-animation{
	0% { margin-left: 1280px;}
	100%{margin-left: -1280px;}
}	

If we want to make a lot of clouds with different motion effects, then you should create a class effect on every of these clouds. For example :

.effect1{
	left: 200px;
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	-ms-transform: scale(0.6);
	transform: scale(0.6);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60);
	opacity: 0.6;
	-webkit-animation: move-animation 25s linear infinite;
	-moz-animation: move-animation 25s linear infinite;
	-ms-animation: move-animation 25s linear infinite;
	-o-animation: move-animation 25s linear infinite;
	animation: move-animation 25s linear infinite;
}
.effect2{
	left: -250px;
	top: -200px;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-o-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	opacity: 0.8;
	-webkit-animation: move-animation 20s linear infinite;
	-moz-animation: move-animation 20s linear infinite;
	-ms-animation: move-animation 20s linear infinite;
	-o-animation: move-animation 20s linear infinite;
	animation: move-animation 20s linear infinite;
}

Please modify the value of the transform and the time scale of the move animation. For placement of the image, use the top and left tags.

Of 2 different effects we will place it on the html code for this animation cloud, so the result will be as follows :

<div class="cloud effect1"></div>
<div class="cloud effect2"></div>

Look at the image below :
Create CSS3 Animation Webpage Using Animation And Transform EffectsHere, we will create a css animation page as shown above by giving some effect to move to the cloud, cars and trees in front. Do not forget to give a glowing effect to the sun. What are the steps to do? Come, follow the tutorial below :

Create HTML Code
First, we create a html document, where each element is identified getting a css effect on a div class and respectively – each of these elements give different names, eg, car, cloud, tree and other. The Complete html code is :

<div class="css-animation-webpage">
	<div class="cloud effect1"></div>
        <div class="sun"></div>		
	<div class="cloud effect2"></div>
	<div class="cloud effect3"></div>
	<div class="cloud effect4"></div>
	<div class="car1 effect5"></div>	
	<div class="car2 effect6"></div>	
        <div class="trees"></div>
</div>

Create CSS Animation Code
CSS animation on this web page is more complex than ever, but it is not hard because basically the css code that we use is more or less the same, like CSS3 animation and CSS3 tranform. The following CSS animation code :
css-animation-webpage.css

.css-animation-webpage{
padding-top:30px;
font-family:Palatino, 'Book Antiqua', Georgia, Garamond, 'Times New Roman', Times, serif;
font-size:32px;
font-weight:bold;
color:#555;
text-align:center;
height:550px;
background-color:#CEECF5;
background-image:url('http://2.bp.blogspot.com/-DmWvXvXOdLk/UoN7YT92TWI/AAAAAAAABJ8/jtobVB7J0WE/s1600/Tutorial+World+Edu+Create+CSS+Multiple+Background+Images+For+Website+1.png'), url('http://4.bp.blogspot.com/-QuDVpqkRgdA/UoN7jt4-9II/AAAAAAAABKE/2jinK4h1SUo/s1600/Tutorial+World+Edu+Create+CSS+Multiple+Background+Images+For+Website+2.png'), url('http://4.bp.blogspot.com/-dCL0a4R21G8/UoN7pcVGuLI/AAAAAAAABKM/N-FARqAHYNE/s1600/Tutorial+World+Edu+Create+CSS+Multiple+Background+Images+For+Website+3.png'), url('http://4.bp.blogspot.com/-05YohdWKKdU/UoN7vm8c9PI/AAAAAAAABKU/tK7cZGWm1b0/s1600/Tutorial+World+Edu+Create+CSS+Multiple+Background+Images+For+Website+4.png'), url('http://4.bp.blogspot.com/-05YohdWKKdU/UoN7vm8c9PI/AAAAAAAABKU/tK7cZGWm1b0/s1600/Tutorial+World+Edu+Create+CSS+Multiple+Background+Images+For+Website+4.png'), url('http://3.bp.blogspot.com/-A3XZ3I2TkFk/UoN73-UXgkI/AAAAAAAABKc/fI61b-_MK_E/s1600/Tutorial+World+Edu+Create+CSS+Multiple+Background+Images+For+Website+5.png'), url('http://3.bp.blogspot.com/-JSXCzP_LbUM/UoN7_TXdZxI/AAAAAAAABKk/RTPedgoLNzY/s1600/Tutorial+World+Edu+Create+CSS+Multiple+Background+Images+For+Website+6.png'), url('http://3.bp.blogspot.com/-0zcNQO-Cg2k/UqUpWUqoEnI/AAAAAAAABNA/TKzIwWGI2Qk/s1600/Create+CSS3+Animation+Webpage+Using+Animation+And+Transform+Effects+7.gif'), url('http://4.bp.blogspot.com/-YDeTiFq3BAE/UqUphalRrAI/AAAAAAAABNI/n3ARogYBtQ8/s1600/Create+CSS3+Animation+Webpage+Using+Animation+And+Transform+Effects+8.gif'),url('http://2.bp.blogspot.com/-RDeambetX7M/UqUpohWBqiI/AAAAAAAABNQ/DSYo0vW2OeU/s1600/Create+CSS3+Animation+Webpage+Using+Animation+And+Transform+Effects+9.gif'), url('http://4.bp.blogspot.com/-0ELHJRJ8u2U/UqUpvx2DnMI/AAAAAAAABNY/QmtQ6v_0d6o/s1600/Create+CSS3+Animation+Webpage+Using+Animation+And+Transform+Effects+10.png');
background-repeat:no-repeat,repeat-x,repeat-x, no-repeat, no-repeat, no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top center, 0px 500px, 0px 270px, 300px 150px, 150px 250px, 900px 220px, 300px 420px,690px 320px,770px 300px,290px 450px,400px 320px;
background-size:1350px 500px, 80px 79px, 900px 230px, 210px 96px, 210px 96px, 250px 200px, 50px 50px,20px 20px,20px 20px,10px 10px,550px 190px;
}
.css-animation-webpage a{
text-decoration:none;
color:#555;
}	

/* This is a css code and animation effect for sun */
.sun{
	position: fixed;
	width: 15px;
	height: 15px;
	background: orange;
	left: 70px;
	top: 250px;
	background: yellow;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
	filter: alpha(opacity=10);
	opacity: .1;
	border-radius: 50%;
	-webkit-animation: sunshine-animation 1s linear infinite;
	-moz-animation: sunshine-animation 3s linear infinite;
	-ms-animation: sunshine-animation 1s linear infinite;
	-o-animation: sunshine-animation 1s linear infinite;
	animation: sunshine-animation 3s linear infinite;
}
@-moz-keyframes sunshine-animation{
	0% {
		opacity: .6; 
		box-shadow:3px 3px 35px 35px orange
	}
	100%{
		opacity: .7;
		box-shadow:3px 3px 40px 40px orange
	}
}

/* This is a css code for cloud */
.cloud{
	width: 400px;
	height: 100px;
	background:url('http://4.bp.blogspot.com/-05YohdWKKdU/UoN7vm8c9PI/AAAAAAAABKU/tK7cZGWm1b0/s1600/Tutorial+World+Edu+Create+CSS+Multiple+Background+Images+For+Website+4.png') no-repeat;
	border-radius: 300px;
	position: relative;
	z-index: 9999;
}

/* This is a css code for cars */
.car1{
	width: 510px;
	height: 400px;
	background:url('http://4.bp.blogspot.com/-ECPRsh0kMWQ/UqUp4HydWRI/AAAAAAAABNg/FpcIOaZu59s/s1600/Create+CSS3+Animation+Webpage+Using+Animation+And+Transform+Effects+11.png');
	background-repeat:repeat-x;
	background-size:250px 250px;
	border-radius: 300px;
	position:relative;
	z-index: 9999;
}
.car2{
	width: 400px;
	height: 400px;
	background:url('http://2.bp.blogspot.com/-F0oRo65O37g/UqUp_LBe_3I/AAAAAAAABNo/hImc1h5fyOs/s1600/Create+CSS3+Animation+Webpage+Using+Animation+And+Transform+Effects+12.png') no-repeat;
	border-radius: 300px;
	position: relative;
	z-index: 9999;
}	

/* This is a animation effect for clouds and car */
.effect1{
	-webkit-animation: move-animation 15s linear infinite;
	-moz-animation: move-animation 15s linear infinite;
	-ms-animation: move-animation 15s linear infinite;
	-o-animation: move-animation 15s linear infinite;
	animation: move-animation 15s linear infinite;
}
.effect2{
	left: 200px;
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	-ms-transform: scale(0.6);
	transform: scale(0.6);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60);
	opacity: 0.6;
	-webkit-animation: move-animation 25s linear infinite;
	-moz-animation: move-animation 25s linear infinite;
	-ms-animation: move-animation 25s linear infinite;
	-o-animation: move-animation 25s linear infinite;
	animation: move-animation 25s linear infinite;
}
.effect3{
	left: -250px;
	top: -200px;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-o-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	opacity: 0.8;
	-webkit-animation: move-animation 20s linear infinite;
	-moz-animation: move-animation 20s linear infinite;
	-ms-animation: move-animation 20s linear infinite;
	-o-animation: move-animation 20s linear infinite;
	animation: move-animation 20s linear infinite;
}
.effect4{
	left: 470px;
	top: -250;
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	-o-transform: scale(0.75);
	-ms-transform: scale(0.75);
	transform: scale(0.75);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
	filter: alpha(opacity=75);
	opacity: 0.75;
	-webkit-animation: move-animation 18s linear infinite;
	-moz-animation: move-animation 18s linear infinite;
	-ms-animation: move-animation 18s linear infinite;
	-o-animation: move-animation 18s linear infinite;
	animation: move-animation 18s linear infinite;
}
.effect5{
	left: -150px;
	top: -190px;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-o-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1.0)";
	filter: alpha(opacity=1.0);
	opacity: 1.0;
	-webkit-animation: move-animation 20s linear infinite;
	-moz-animation: move-animation 20s linear infinite;
	-ms-animation: move-animation 20s linear infinite;
	-o-animation: move-animation 20s linear infinite;
	animation: move-animation 20s linear infinite;
}
.effect6{
	left: -100px;
	top: -570px;
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1.0)";
	filter: alpha(opacity=1.0);
	opacity: 1.0;
	-webkit-animation: move-animation 32s linear infinite;
	-moz-animation:move-animation  32s linear infinite;
	-ms-animation: move-animation 32s linear infinite;
	-o-animation: move-animation 32s linear infinite;
	animation: move-animation 32s linear infinite;
}
@-webkit-keyframes move-animation{
	0% { margin-left: 1280px;}
	100%{margin-left: -1280px;}
}
@-moz-keyframes move-animation{
	0% { margin-left: 1280px;}
	100%{margin-left: -1280px;}
}
@-o-keyframes move-animation{
	0% { margin-left: 1280px;}
	100%{margin-left: -1280px;}
}	

/* This is a css code and animation effect for trees */
.trees {
    position: fixed;
    z-index: 9999;
    margin: 0px auto 0px auto !important;
    padding: 0px 0px 0px 0px;
    top: 400px;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 100% !important;
    background: url("http://4.bp.blogspot.com/-dCL0a4R21G8/UoN7pcVGuLI/AAAAAAAABKM/N-FARqAHYNE/s1600/Tutorial+World+Edu+Create+CSS+Multiple+Background+Images+For+Website+3.png");
    background-size:1000px 153px;   
	background-repeat: repeat-x;
    -webkit-animation: trees-animation 50s linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: trees-animation  50s linear;
    -moz-animation-iteration-count: infinite;
    -ms-animation: trees-animation 50s linear;
    -ms-animation-iteration-count: infinite;
    -o-animation: trees-animation 50s linear;
    -o-animation-iteration-count: infinite;
    animation: trees-animation 50s linear;
    animation-iteration-count: infinite;
    opacity:1.00;
    filter:alpha(opacity=100);
}
@-webkit-keyframes trees-animation {
  0% {
    background-position: 0 30px;
  }
  100% {
    background-position: 2000px 30px;
  }
}
@-moz-keyframes trees-animation {
  0% {
    background-position: 0 30px;
  }
  100% {
    background-position: 2000px 30px;
  }
}
@-ms-keyframes trees-animation {
  0% {
    background-position: 0 30px;
  }
  100% {
    background-position: 2000px 30px;
  }
}
@-o-keyframes trees-animation {
  0% {
    background-position: 0 30px;
  }
  100% {
    background-position: 2000px 30px;
  }
}
@keyframes trees-animation {
  0% {
    background-position: 0 30px;
  }
  100% {
    background-position: 2000px 30px;
  }
}

Additionally, this animation web page also used animation gif image as a combination. Gif animation image is placed as page background using css multiple background image. For more details, you can get a tutorial in this post : Create Multiple Background Images For Website.

More detail, the HTML and CSS code to create complex css animation webpage are as follows :
css-animation-webpage.html

<html>
<head>
<title> Create CSS3 Animation Webpage Using Animation And Transform Effects | Tutorial.World.Edu </title>
<link rel="stylesheet" href="css-animation-webpage.css">
</head>
<body>
<div class="css-animation-webpage"><a href="http://tutorial.world.edu/website-design/create-css3-animation-webpage-animation-transform-effects/">Create CSS3 Animation Webpage Using Animation & Transform Effects</a><br/><a href="http://tutorial.world.edu">Tutorial.World.Edu</a>
	<div class="cloud effect1"></div>
        <div class="sun"></div>
	<div class="cloud effect2"></div>
	<div class="cloud effect3"></div>
	<div class="cloud effect4"></div>
	<div class="car1 effect5"></div>
	<div class="car2 effect6"></div>
        <div class="trees"></div>
</div>
</body>
</html>

Done. Now if you want to try to create a CSS animation webpage alone ? Please practiced and good luck …
Thanks for reading Create CSS3 Animation Webpage Using Animation And Transform Effects

[Tutorial.World.Edu]

5 thoughts on “Create CSS3 Animation Webpage Using Animation And Transform Effects

Leave a Reply

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