CSS JQuery: Animating a box with CSS3

<style type="text/css">

* { margin:0; padding:0; } /* to remove the top and left whitespace */

html, body { width:100%; height:100%; background:#0CF;} /* just to be sure these are full screen*/

.container { width:100%; height:100%; overflow:hidden; position:absolute; display:block; }

.ground {
width:100%;
height:50px;
background:url(http://corkeynet.com/test/images/ground_pattern_small.jpg) repeat-x;
position:absolute;
bottom:0px;
}

.cloud{ position:absolute; display:block; }

#cloud1 {
width:166px;
height:94px;
background:url(http://corkeynet.com/test/images/cloud1.png) no-repeat;
z-index:0;
left:1px;
/* Chrome, Safari, Opera */
-webkit-animation: cloud1 5s linear 1, cloud1_loop 5s 5s linear infinite;
/* Standard syntax */
animation: cloud1 5s linear 1, cloud1_loop 5s 5s linear infinite;
}

#cloud2 {
width:146px;
height:93px;
background:url(http://corkeynet.com/test/images/cloud2.png) no-repeat;
z-index:2;
/* Chrome, Safari, Opera */
-webkit-animation: cloud2 34s linear 1, cloud2_loop 10s 3s linear infinite;
/* Standard syntax */
animation: cloud2 3s linear 1, cloud2_loop 10s 3s linear infinite;
}

#cloud3 {
width:113px;
height:68px;
background:url(http://corkeynet.com/test/images/cloud3.png) no-repeat;
z-index:3;
/* Chrome, Safari, Opera */
-webkit-animation: cloud3 8s linear 1, cloud3_loop 16s 8s linear infinite;
/* Standard syntax */
animation: cloud3 8s linear 1, cloud3_loop 16s 8s linear infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes cloud1 {
0% {left:20px; top:10px;}
100% {left:100%; top:10px;}
}

@-webkit-keyframes cloud1_loop {
0% {left:-166px; top:10px;}
100% {left:100%; top:10px;}
}

@-webkit-keyframes cloud2 {
0% {left:75%; top:30px;}
100% {left:100%; top:30px;}
}

@-webkit-keyframes cloud2_loop {
0% {left:-146px; top:30px;}
100% {left:100%; top:30px;}
}

@-webkit-keyframes cloud3 {
0% {left:50%; top:50px;}
100% {left:100%; top:50px;}
}

@-webkit-keyframes cloud3_loop {
0% {left:-146px; top:50px;}
100% {left:100%; top:50px;}
}

/* Standard syntax */
@keyframes cloud1 {
0% {left:20px; top:10px;}
100% {left:100%; top:10px;}
}

@keyframes cloud1_loop {
0% {left:-166px; top:10px;}
100% {left:100%; top:10px;}
}

@keyframes cloud2 {
0% {left:75%; top:30px;}
100% {left:100%; top:30px;}
}

@keyframes cloud2_loop {
0% {left:-146px; top:30px;}
100% {left:100%; top:30px;}
}

@keyframes cloud3 {
0% {left:50%; top:50px;}
100% {left:100%; top:50px;}
}

@keyframes cloud3_loop {
0% {left:-146px; top:50px;}
100% {left:100%; top:50px;}
}

.box {
width:112px;
height:112px;
background:url(http://corkeynet.com/test/images/gift_box_small.png) no-repeat;
margin:auto;
z-index:4;
position: absolute;
left: 0;
top: auto;
bottom: 25px;
right: 0;
/* Chrome, Safari, Opera */
-webkit-animation: box_fall 8s linear 1;
/* Standard syntax */
animation: box_fall 8s linear 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes box_fall {
0% {bottom: 100%;}
100% {bottom: 25px;}
}
/* Standard syntax */
@keyframes box_fall {
0% {bottom: 100%;}
100% {bottom: 25px;}
}

</style>

<body>

<div class="container">
<div class="ground"></div>
<div id="cloud1" class="cloud"></div>
<div id="cloud2" class="cloud"></div>
<div id="cloud3" class="cloud"></div>
<div class="box"></div>
</div>

</body>

Output :)

1)

CSS JQuery

Wednesday, October 22, 2014

Animating a box with CSS3

No comments:

Post a Comment