Create Animated Landscape using Pure CSS3

Posted by on August 26th in Tutorials.

css3animation

Some months ago we have created an animated landscape using Photoshop and jQuery. So today we just decided to create some what same effect with pure CSS3 technology. Below is the stepwise instruction to create animated landscape with css3.

Check Out the Demo First (Safari and Chrome Only)

Step 1 : Creating Basic Layout

Here we are first of all trying to create the basic layout of our tutorial (Sky, River and Land). Here first of all we will create one big rectangle which work as our canvas. Then will create three rows each one works as Sky, River and Land. Then for Sky we will use CSS3 gradient property and for River and Land will use simple color, you can also go for gradients on river and land if you want. Check out the below image for more clarification.

1

In above image you can see we have created three rows for Sky, River and Land. Now check out Xhtml and CSS3 Codes for above Section.

<div id="wrapper"></div>
#wrapper {
	width:800px;
	height:600px;
	background-color:#CCC;
	border:5px solid #F90;
}
#sky {
	height:200px;
	background:-webkit-gradient(
                         linear,
                         left bottom,
                         left top,
                         color-stop(0.21, #e4f7fa),
                         color-stop(0.41, #d6f2f9));
}
#river {
	height:150px;
	background-color:#09F;
}
#land {
	height:100px;
	background-color:#6C0;
}

Step 2 : Creating Mountains

Now we need to create some mountains on our above coded landscape. To do it we will use Border Property of css, will give large border size to a particular element and then will hide three sides of border to get our desired final effect of mountains. And then set all the triangles position to relative and then using margin properties of css you can place each mountains where you like. Check out the final demo to know where i have kept all the triangles. Below image will show you how we have created the triangles which on later we will use them as mountains.

2

Check out the below Xhtml and Css codes of creating Mountians(Triangles).

.triangle-l {
	border-color: transparent transparent #633 transparent;
	border-style:solid;
	border-width:130px;
	height:0px;
	width:0px;
	position: relative;
	left: 5px;
	margin-top:-513px;
	z-index: 1;
}
.triangle-2 {
	border-color: transparent transparent #633 transparent;
	border-style:solid;
	border-width:110px;
	height:0px;
	width:0px;
	position: relative;
	left: 190px;
	margin-top:-220px;
	z-index: 1;
}
.triangle-3 {
	border-color: transparent transparent #633 transparent;
	border-style:solid;
	border-width:130px;
	height:0px;
	width:0px;
	position: relative;
	left: 380px;
	margin-top:-220px;
	z-index: 1;
}
.triangle-4 {
	border-color: transparent transparent #633 transparent;
	border-style:solid;
	border-width:130px;
	height:0px;
	width:0px;
	position: relative;
	left: 540px;
	margin-top:-260px;
	z-index: 1;
}

Step 3 : Create Clouds

Now its time to create clouds. We will first of all create circles with border-radius property of css3. Then will try to set all the circles in such a manner so that it will look like clouds. Checkout the below image for more clarification.

3

#ele1 {
	width:50px;
	height:50px;
	background-color:#FFF;
	-moz-border-radius: 25px;
    -webkit-border-radius: 25px;
	float:left;
	position:absolute;
	margin-left:20px;
}
#ele2 {
	width:50px;
	height:50px;
	background-color:#FFF;
	-moz-border-radius: 25px;
    -webkit-border-radius: 25px;
	float:left;
	margin-top:10px;
}
#ele3 {
	width:50px;
	height:50px;
	background-color:#FFF;
	-moz-border-radius: 25px;
    -webkit-border-radius: 25px;
	float:left;
	margin-top:5px;
	margin-left:5px;
}
#ele4 {
	width:50px;
	height:50px;
	background-color:#FFF;
	-moz-border-radius: 25px;
    -webkit-border-radius: 25px;
	float:left;
	position:absolute;
	margin-top:20px;
	margin-left:23px;
}

Step 4 : Create Boat

Now here we will create A simple looking boat. Check out below image for more clarification on how to create boat.

4

#base {
	border-color: #FFF transparent transparent transparent;
	border-style:solid;
	border-width:20px;
	width:70px;
	position:relative;
}
#pal {
	border-color: transparent transparent transparent #FFF;
	border-style:solid;
	border-width:15px;
	height:30px;
	top:-82px;
	left:60px;
	position:relative;
}

Do you want to clear the TB0-122 exam successfully in the first attempt? How to achieve this? Exams King has released the most up-to-date practice questions for TB0-118 and 000-M247 Exams, which are useful and valuable for you to prepare the exam well.

Step 5 : Now making Boat and Cloud live (Animation)

Now last and Final Step is to Make our Boat and Clouds live means Now animation time. Here for animation we will give our animation a name first lets called it Animation1, then next step is to set the time for one cycle of animation lets set one cycle duration at 20 seconds, now we want our cycle to run infinite loops so set animation-iteration-count to Infinite, now we need to set exactly how to animate, to do it initially we want our cloud and boat to appear outside of the canvas so set 0% value of animation at margin-left to -60px and when animation completes 100% at margin-left 820px and it takes 20 second to complete this path. So this way we get our animation running. Below are the CSS3 codes for animation.

While you won’t be able to create animation or obtain the type of images you can with the data above, you can however capture critical images with a security camera via the techology offered at 123 CCTV. Other surveillance camera information can be found on the web.

#clouds {
	width:150px;
	height:150px;
	overflow:hidden;
	margin-left:50px;
	padding-top:10px;
	-webkit-animation-name: animation1;
 	-webkit-animation-duration: 20s;
 	-webkit-animation-iteration-count: infinite;
 	-webkit-animation-direction: linear;
}
@-webkit-keyframes animation1{
	0%{margin-left:-60px;}
	100%{margin-left:820px;}
}
 
#boat {
	margin-left:500px;
	position:relative;
	top:100px;
        -webkit-animation-name: animation11;
 	-webkit-animation-duration: 30s;
 	-webkit-animation-iteration-count: infinite;
 	-webkit-animation-direction: linear;
}
@-webkit-keyframes animation11{
	0%{margin-left:800px;}
	100%{margin-left:-100px;}
}

Pass your cpa exam and 640-553 in first attempt using 70-649 dumps and other resources. We offer 100% success in real exam with up to date 70-573 dumps and HP0-S27 braindumps. Off course testking is the best source of brain dumps.

Vikas ghodke, 25 Male from india, now working as freelance web designer. You can follow him on twitter @acrisdesign

16 Comments

  1. [...] Create Animated Landscape using Pure CSS3 [...]

  2. [...] Create Animated Landscape using Pure CSS3 [...]

  3. [...] Animated LandscapeVisitar sitio [...]

  4. A clear idea about css …thank you for the post…

  5. Did you experience any difficulties in building Breeze Baby from the older plans?, surprises?

  6. [...] Create Animated Landscape using Pure CSS3 In this tutorial you’ll see how you can create a landscape effect with pure CSS3 technology: [...]

  7. [...] 6. Create Animated Landscape Only With CSS3 [...]

  8. I never think of such ideas and CSS3. I am surly going to try this and let you know if some issue occur with me…

  9. [...] Create Animated Landscape using Pure CSS3 [...]

  10. [...] Create Animated Landscape using Pure CSS3 [...]


  11. pratik

    awesome tutorial,great use of css


  12. Prodyot

    Great Tutorial.
    I Learnt many things through this tutorial.
    Thanks for sharing.

  13. [...] Create Animated Landscape using Pure CSS3In this tutorial you’ll see how you can create a landscape effect with pure CSS3 technology: [...]

Leave a Reply

Comment moderation is enabled. Your comment may take some time to appear.