Lets create a very basic and simple animation in css. without using
JavaScript or jQuery.
.sky #cloude1{
width: 135px;
height: 95px;
background-image:url('images/cloude.png');
position: relative;
top: 10px;
left : 20px;
-moz-animation-name: cloude1;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 5.0s;
-webkit-animation-name: cloude1;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 5.0s;
-ms-animation-name: cloude1;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-in;
-ms-animation-duration: 5.0s;
-o-animation-name: cloude1;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease-in;
-o-animation-duration: 5.0s;
animation-name: cloude1;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 5.0s;
}
.sky #cloude2{
width: 135px;
height: 95px;
background-image:url('images/cloude.png');
position: absolute;
top: -20px;
left : 240px;
-moz-animation-name: cloude2;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 6.0s;
-webkit-animation-name: cloude2;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 6.0s;
-ms-animation-name: cloude2;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-in;
-ms-animation-duration: 6.0s;
-o-animation-name: cloude2;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease-in;
-o-animation-duration: 6.0s;
animation-name: cloude2;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 6.0s;
}
.sky #cloude3{
width: 135px;
height: 95px;
background-image:url('images/cloude.png');
position: absolute;
top: 20px;
left : 450px;
-moz-animation-name: cloude3;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 8.0s;
-webkit-animation-name: cloude3;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 8.0s;
-ms-animation-name: cloude3;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-in;
-ms-animation-duration: 8.0s;
-o-animation-name: cloude3;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease-in;
-o-animation-duration: 8.0s;
animation-name: cloude3;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 8.0s;
}
.sky #gress1{
width: 58px;
height: 89px;
background-image:url('images/gress.png');
position: absolute;
bottom: 0px;
left : 10px;
-moz-animation-name: gress1;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 3.5s;
-webkit-animation-name: gress1;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 3.5s;
-ms-animation-name: gress1;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-in;
-ms-animation-duration: 3.5s;
-o-animation-name: gress1;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease-in;
-o-animation-duration: 3.5s;
animation-name: gress1;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 3.5s;
}
.sky #gress2{
width: 58px;
height: 89px;
background-image:url('images/gress.png');
position: absolute;
bottom: 0px;
left : 90px;
-moz-animation-name: gress2;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 4.0s;
-webkit-animation-name: gress2;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 4.0s;
-ms-animation-name: gress2;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-in;
-ms-animation-duration: 4.0s;
-o-animation-name: gress2;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease-in;
-o-animation-duration: 4.0s;
animation-name: gress2;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 4.0s;
}
.sky #gress3{
width: 58px;
height: 89px;
background-image:url('images/gress.png');
position: absolute;
bottom: 0px;
left : 500px;
-moz-animation-name: gress3;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 5.0s;
-webkit-animation-name: gress3;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 5.0s;
-ms-animation-name: gress3;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-in;
-ms-animation-duration: 5.0s;
-o-animation-name: gress3;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease-in;
-o-animation-duration: 5.0s;
animation-name: gress3;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 5.0s;
}
.sky #gress4{
width: 58px;
height: 89px;
background-image:url('images/gress.png');
position: absolute;
bottom: 0px;
left : 580px;
-moz-animation-name: gress4;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 6.0s;
-webkit-animation-name: gress4;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 6.0s;
-ms-animation-name: gress4;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-in;
-ms-animation-duration: 6.0s;
-o-animation-name: gress4;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease-in;
-o-animation-duration: 6.0s;
animation-name: gress4;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 6.0s;
}
.sky #tree{
width: 68px;
height: 99px;
background-image:url('images/tree.png');
position: absolute;
bottom: 0px;
left : 290px;
-moz-animation-name: tree;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 5.0s;
-webkit-animation-name: gress4;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 5.0s;
-ms-animation-name: tree;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-in;
-ms-animation-duration: 5.0s;
-o-animation-name: tree;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease-in;
-o-animation-duration: 5.0s;
animation-name: tree;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 5.0s;
}
.sky #ball1{
width: 60px;
height: 60px;
background: #6bab1e;
position: absolute;
border-radius: 60px;
bottom: 151px;
left : 301px;
-moz-animation-name: ball1;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 5.0s;
-webkit-animation-name: ball1;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 5.0s;
-ms-animation-name: ball1;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-in;
-ms-animation-duration: 5.0s;
-o-animation-name: ball1;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease-in;
-o-animation-duration: 5.0s;
animation-name: ball1;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 5.0s;
}
.sky #ball2{
width: 60px;
height: 60px;
background: #6bab1e;
position: absolute;
border-radius: 60px;
bottom: 91px;
left : 351px;
-moz-animation-name: ball2;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 5.0s;
-webkit-animation-name: ball2;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 5.0s;
-ms-animation-name: ball2;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-in;
-ms-animation-duration: 5.0s;
-o-animation-name: ball2;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease-in;
-o-animation-duration: 5.0s;
animation-name: ball2;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 5.0s;
}
.sky #ball3{
width: 29px;
height: 29px;
background: #6bab1e;
position: absolute;
border-radius: 30px;
bottom: 55px;
left : 365px;
-moz-animation-name: ball3;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 4.5s;
-webkit-animation-name: ball3;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 4.5s;
-ms-animation-name: ball3;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-in;
-ms-animation-duration: 4.5s;
-o-animation-name: ball3;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease-in;
-o-animation-duration: 4.5s;
animation-name: ball3;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 4.5s;
}
.sky #ball4{
width: 27px;
height: 27px;
background: #6bab1e;
position: absolute;
border-radius: 30px;
bottom: 49px;
left : 263px;
-moz-animation-name: ball4;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 5.5s;
-webkit-animation-name: ball4;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 5.5s;
-ms-animation-name: ball4;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-in;
-ms-animation-duration: 5.5s;
-o-animation-name: ball4;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease-in;
-o-animation-duration: 5.5s;
animation-name: ball4;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 5.5s;
}
.sky #ball5{
width: 47px;
height: 47px;
background: #6bab1e;
position: absolute;
border-radius: 50px;
bottom: 83px;
left : 237px;
-moz-animation-name: ball5;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 6.0s;
-webkit-animation-name: ball5;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 6.0s;
-ms-animation-name: ball5;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-in;
-ms-animation-duration: 6.0s;
-o-animation-name: ball5;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease-in;
-o-animation-duration: 6.0s;
animation-name: ball5;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 6.0s;
}
.sky #ball6{
width: 47px;
height: 47px;
background: #6bab1e;
position: absolute;
border-radius: 50px;
bottom: 83px;
left : 237px;
-moz-animation-name: ball6;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 6.0s;
-webkit-animation-name: ball6;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 6.0s;
-ms-animation-name: ball6;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-in;
-ms-animation-duration: 6.0s;
-o-animation-name: ball6;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease-in;
-o-animation-duration: 6.0s;
animation-name: ball6;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 6.0s;
}
.sky #ball7{
width: 37px;
height: 37px;
background: #6bab1e;
position: absolute;
border-radius: 40px;
bottom: 132px;
left : 265px;
-moz-animation-name: ball7;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 5.0s;
-webkit-animation-name: ball7;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 5.0s;
-ms-animation-name: ball7;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-in;
-ms-animation-duration: 5.0s;
-o-animation-name: ball7;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease-in;
-o-animation-duration: 5.0s;
animation-name: ball7;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 5.0s;
}
.sky #ball8{
width: 46px;
height: 46px;
background: #6bab1e;
position: absolute;
border-radius: 50px;
bottom: 100px;
left : 303px;
-moz-animation-name: ball8;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 5.5s;
-webkit-animation-name: ball8;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 55s;
-ms-animation-name: ball8;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-in;
-ms-animation-duration: 5.5s;
-o-animation-name: ball8;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease-in;
-o-animation-duration: 5.5s;
animation-name: ball8;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 5.5s;
}
@-moz-keyframes cloude1{
0% {
-moz-transform: translateX(650px);
opacity: 1;
}
100% {
-moz-transform: translateX(0px);
opacity: 1;
}
}
@-webkit-keyframes cloude1{
0% {
-webkit-transform: translateX(650px);
opacity: 1;
}
100% {
-webkit-transform: translateX(0px);
opacity: 1;
}
}
@-ms-keyframes cloude1{
0% {
-ms-transform: translateX(650px);
opacity: 1;
}
100% {
-ms-transform: translateX(0px);
opacity: 1;
}
}
@-o-keyframes cloude1{
0% {
-o-transform: translateX(650px);
opacity: 1;
}
100% {
-o-transform: translateX(0px);
opacity: 1;
}
}
@keyframes cloude1{
0% {
transform: translateX(650px);
opacity: 1;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
@-moz-keyframes cloude2{
0% {
-moz-transform: translateX(650px);
opacity: 1;
}
100% {
-moz-transform: translateX(0px);
opacity: 1;
}
}
@-webkit-keyframes cloude2{
0% {
-webkit-transform: translateX(650px);
opacity: 1;
}
100% {
-webkit-transform: translateX(0px);
opacity: 1;
}
}
@-ms-keyframes cloude2{
0% {
-ms-transform: translateX(650px);
opacity: 1;
}
100% {
-ms-transform: translateX(0px);
opacity: 1;
}
}
@-o-keyframes cloude2{
0% {
-o-transform: translateX(650px);
opacity: 1;
}
100% {
-o-transform: translateX(0px);
opacity: 1;
}
}
@keyframes cloude2{
0% {
transform: translateX(650px);
opacity: 1;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
@-moz-keyframes cloude3{
0% {
-moz-transform: translateX(650px);
opacity: 1;
}
100% {
-moz-transform: translateX(0px);
opacity: 1;
}
}
@-webkit-keyframes cloude3{
0% {
-webkit-transform: translateX(650px);
opacity: 1;
}
100% {
-webkit-transform: translateX(0px);
opacity: 1;
}
}
@-ms-keyframes cloude3{
0% {
-ms-transform: translateX(650px);
opacity: 1;
}
100% {
-ms-transform: translateX(0px);
opacity: 1;
}
}
@-o-keyframes cloude3{
0% {
-o-transform: translateX(650px);
opacity: 1;
}
100% {
-o-transform: translateX(0px);
opacity: 1;
}
}
@keyframes cloude3{
0% {
transform: translateX(650px);
opacity: 1;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
@-moz-keyframes gress1{
0% {
-moz-transform: translateY(100px);
opacity: 1;
}
100% {
-moz-transform: translateY(0px);
opacity: 1;
}
}
@-webkit-keyframes gress1{
0% {
-webkit-transform: translateY(100px);
opacity: 1;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
@-ms-keyframes gress1{
0% {
-ms-transform: translateY(100px);
opacity: 1;
}
100% {
-ms-transform: translateY(0px);
opacity: 1;
}
}
@-o-keyframes gress1{
0% {
-o-transform: translateY(100px);
opacity: 1;
}
100% {
-o-transform: translateY(0px);
opacity: 1;
}
}
@keyframes gress1{
0% {
transform: translateY(100px);
opacity: 1;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
@-moz-keyframes gress2{
0% {
-moz-transform: translateY(200px);
opacity: 1;
}
100% {
-moz-transform: translateY(0px);
opacity: 1;
}
}
@-webkit-keyframes gress2{
0% {
-webkit-transform: translateY(200px);
opacity: 1;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
@-ms-keyframes gress2{
0% {
-ms-transform: translateY(200px);
opacity: 1;
}
100% {
-ms-transform: translateY(0px);
opacity: 1;
}
}
@-o-keyframes gress2{
0% {
-o-transform: translateY(200px);
opacity: 1;
}
100% {
-o-transform: translateY(0px);
opacity: 1;
}
}
@keyframes gress2{
0% {
transform: translateY(200px);
opacity: 1;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
@-moz-keyframes gress3{
0% {
-moz-transform: translateY(300px);
opacity: 1;
}
100% {
-moz-transform: translateY(0px);
opacity: 1;
}
}
@-webkit-keyframes gress3{
0% {
-webkit-transform: translateY(300px);
opacity: 1;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
@-ms-keyframes gress3{
0% {
-ms-transform: translateY(300px);
opacity: 1;
}
100% {
-ms-transform: translateY(0px);
opacity: 1;
}
}
@-o-keyframes gress3{
0% {
-o-transform: translateY(300px);
opacity: 1;
}
100% {
-o-transform: translateY(0px);
opacity: 1;
}
}
@keyframes gress3{
0% {
transform: translateY(300px);
opacity: 1;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
@-moz-keyframes gress4{
0% {
-moz-transform: translateY(400px);
opacity: 1;
}
100% {
-moz-transform: translateY(0px);
opacity: 1;
}
}
@-webkit-keyframes gress4{
0% {
-webkit-transform: translateY(400px);
opacity: 1;
}
100% {
-webit-transform: translateY(0px);
opacity: 1;
}
}
@-ms-keyframes gress4{
0% {
-ms-transform: translateY(400px);
opacity: 1;
}
100% {
-ms-transform: translateY(0px);
opacity: 1;
}
}
@-o-keyframes gress4{
0% {
-o-transform: translateY(400px);
opacity: 1;
}
100% {
-o-transform: translateY(0px);
opacity: 1;
}
}
@keyframes gress4{
0% {
transform: translateY(400px);
opacity: 1;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
@-moz-keyframes tree{
0% { opacity: 0; }
40% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes tree{
0% { opacity: 0; }
40% { opacity: 0; }
100% { opacity: 1; }
}
@-ms-keyframes tree{
0% { opacity: 0; }
40% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes tree{
0% { opacity: 0; }
40% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes tree{
0% { opacity: 0; }
40% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes ball1{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes ball1{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-ms-keyframes ball1{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes ball1{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes ball1{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes ball2{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes ball2{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-ms-keyframes ball2{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes ball2{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes ball2{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes ball3{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes ball3{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-ms-keyframes ball3{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes ball3{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes ball3{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes ball4{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes ball4{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-ms-keyframes ball4{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes ball4{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes ball4{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes ball5{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes ball5{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-ms-keyframes ball5{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes ball5{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes ball5{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes ball6{
0% { opacity: 0; }
40% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes ball6{
0% { opacity: 0; }
40% { opacity: 0; }
100% { opacity: 1; }
}
@-ms-keyframes ball6{
0% { opacity: 0; }
40% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes ball6{
0% { opacity: 0; }
40% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes ball6{
0% { opacity: 0; }
40% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes ball7{
0% { opacity: 0; }
60% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes ball7{
0% { opacity: 0; }
60% { opacity: 0; }
100% { opacity: 1; }
}
@-ms-keyframes ball7{
0% { opacity: 0; }
60% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes ball7{
0% { opacity: 0; }
60% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes ball7{
0% { opacity: 0; }
60% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes ball8{
0% { opacity: 0; }
40% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes ball8{
0% { opacity: 0; }
40% { opacity: 0; }
100% { opacity: 1; }
}
@-ms-keyframes ball8{
0% { opacity: 0; }
40% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes ball8{
0% { opacity: 0; }
40% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes ball8{
0% { opacity: 0; }
40% { opacity: 0; }
100% { opacity: 1; }
}
<div class="sky"> <div id="cloude1"> </div> <div id="cloude2"> </div> <div id="cloude3"> </div> <div id="gress1"> </div> <div id="gress2"> </div> <div id="gress3"> </div> <div id="gress4"> </div> <div id="treetemp"> </div> <div id="tree"> </div> <div id="ball1"> </div> <div id="ball2"> </div> <div id="ball3"> </div> <div id="ball4"> </div> <div id="ball5"> </div> <div id="ball6"> </div> <div id="ball7"> </div> <div id="ball8"> </div> </div>
