How to do CSS3 Animation?

Final Output of the Animation
Here are the HTML5 codes:

    
    




         











             This is a 

Pure CSS3
animation by 
                
                    

Nilotpal Singha

            
            

             Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                when an unknown printer took a galley of type and scrambled it to make a type
                specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                 when an unknown printer took a galley of type and scrambled it to make a type
                 specimen book.

Here are the CSS3 codes:

body {
 background: rgb(169,231,255) no-repeat;
 background: -moz-linear-gradient(top,  rgb(169,231,255) 0%, rgb(255,255,255) 50%, rgb(92,114,36) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(169,231,255)), color-stop(50%,rgb(255,255,255)), color-stop(100%,rgb(92,114,36))) no-repeat;
 background: -webkit-linear-gradient(top,  rgb(169,231,255) 0%,rgb(255,255,255) 50%,rgb(92,114,36) 100%) no-repeat;
 background: -o-linear-gradient(top,  rgb(169,231,255) 0%,rgb(255,255,255) 50%,rgb(92,114,36) 100%) no-repeat;
 background: -ms-linear-gradient(top,  rgb(169,231,255) 0%,rgb(255,255,255) 50%,rgb(92,114,36) 100%) no-repeat;
 background: linear-gradient(to bottom,  rgb(169,231,255) 0%,rgb(255,255,255) 50%,rgb(92,114,36) 100%) no-repeat;
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e7ff', endColorstr='#5c7224',GradientType=0 ) no-repeat;
 overflow: hidden;
}

h2 {
 display: inline;
 font-family: Georgia, "Times New Roman", Times, serif;
 font-style: italic;
 text-shadow: 0 2px 0 #FF6C00;
 color: white;
 font-size: 40px;
}

aside a {
 text-decoration: none;
 border-bottom: thin dotted #FF6C00;
}


aside {
 background: #033;
 padding: 20px;
 margin-top: 20px;
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 color: white;
 text-shadow: 0 -1px 0 #FF6C00;
 font-size: 30px;
 border-radius: 20px;
 text-align: center;
 box-shadow: 5px 5px 0 rgba(0,51,51,0.5);
}

article {
 margin-top: 40px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 line-height: 20px;
}

header {
 width: 960px;
 margin: auto;
 height: 200px;
}

#wraper {
 width: 960px;
 height: auto;
 margin: auto;
 position: relative;
}

#hill {
 background: url(http://i1221.photobucket.com/albums/dd471/nilotpalsingha/Web%20Test%20Album/hills_zps11c79431.png) no-repeat;
 height: 168px;
 width: 950px;
 margin: auto;
 z-index: 10;
}

#sun {
 background: url(http://i1221.photobucket.com/albums/dd471/nilotpalsingha/Web%20Test%20Album/sun_zps8c3e632e.png) no-repeat;
 height: 237px;
 width: 237px;
 position: absolute;
 top: -92px;
 left: 100px;
 z-index: -10;
 animation: rotating 15s linear infinite;
 -moz-animation: rotating 15s linear infinite; /*Firefox*/
 -webkit-animation: rotating 15s linear infinite; /*Safari and Chrome*/
 -o-animation: rotating 15s linear infinite; /*Opera*/

}

@keyframes rotating
{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

@-moz-keyframes rotating /*Firefox*/
{
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotating /*Safari and Chrome*/
{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

@-o-keyframes rotating /*Opera*/
{
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(360deg);}
}

#cloud_1 {
 background: url(http://i1221.photobucket.com/albums/dd471/nilotpalsingha/Web%20Test%20Album/cloud_1_zps1d4664d8.png) no-repeat;
 height: 135px;
 width: 325px;
 position: absolute;
 top: -72px;
 animation: mymove1 10s linear infinite;
 -moz-animation: mymove1 10s linear infinite; /*Firefox*/
 -webkit-animation: mymove1 10s linear infinite; /*Safari and Chrome*/
 -o-animation: mymove1 10s linear infinite; /*Opera*/
}

@keyframes mymove1
{
from {right: -500px;}
to {right: 2000px;}
}

@-moz-keyframes mymove1 /*Firefox*/
{
from {right: -500px;}
to {right: 2000px;}
}

@-webkit-keyframes mymove1 /*Safari and Chrome*/
{
from {right: -500px;}
to {right: 2000px;}
}

@-o-keyframes mymove1 /*Opera*/
{
from {right: -500px;}
to {right: 2000px;}
}

#cloud_2 {
 background: url(http://i1221.photobucket.com/albums/dd471/nilotpalsingha/Web%20Test%20Album/cloud_2_zpsfc12cb87.png) no-repeat;
 height: 49px;
 width: 140px;
 position: absolute;
 top: -180px;
 animation: mymove2 20s linear infinite;
 -moz-animation: mymove2 20s linear infinite; /*Firefox*/
 -webkit-animation: mymove2 20s linear infinite; /*Safari and Chrome*/
 -o-animation: mymove2 20s linear infinite; /*Opera*/
}

@keyframes mymove2
{
from {right: -500px;}
to {right: 2000px;}
}
@-moz-keyframes mymove2 /*Firefox*/
{
from {right: -500px;}
to {right: 2000px;}
}

@-webkit-keyframes mymove2 /*Safari and Chrome*/
{
from {right: -500px;}
to {right: 2000px;}
}

@-o-keyframes mymove2 /*Opera*/
{
from {right: -500px;}
to {right: 2000px;}
}

#cloud_3 {
 background: url(http://i1221.photobucket.com/albums/dd471/nilotpalsingha/Web%20Test%20Album/cloud_3_zps1ad48b94.png) no-repeat;
 height: 49px;
 width: 140px;
 position: absolute;
 top: -110px;
 animation: mymove3 30s linear infinite;
 -moz-animation: mymove3 30s linear infinite; /*Firefox*/
 -webkit-animation: mymove3 30s linear infinite; /*Safari and Chrome*/
 -o-animation: mymove3 30s linear infinite; /*Opera*/
}

@keyframes mymove3
{
from {right: -500px;}
to {right: 2000px;}
}

@-moz-keyframes mymove3 /*Firefox*/
{
from {right: -500px;}
to {right: 2000px;}
}

@-webkit-keyframes mymove3 /*Safari and Chrome*/
{
from {right: -500px;}
to {right: 2000px;}
}

@-o-keyframes mymove3 /*Opera*/
{
from {right: -500px;}
to {right: 2000px;}
}

Final Output of the Animation