3D FootBall Jumping Animation CSS3

.container { background:url(ground.jpg) no-repeat; width:800px; height:593px; margin:0 auto; overflow:hidden; }
#ballWrapper { width:120px; height:300px; position:fixed; left:50%; top:50%; margin-left:-70px; z-index:100; -webkit-transform:scale(1); -moz-transform:scale(1);
-ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); -webkit-transition:all 7s linear 0s; -moz-transition:all 7s linear 0s; transition:all 7s linear 0s; }
#ballWrapper:active { -webkit-transform:scale(0); -moz-transform:scale(0); -ms-transform:scale(0); -o-transform:scale(0); transform:scale(0); }
#ball { width:120px; height:120px; border-radius:70px;
box-shadow:inset 0 -5px 15px rgba(255,255,255,0.4), inset -2px -1px 40px rgba(0,0,0,0.4), 0 0 1px #000; position:absolute; top:0; z-index:11;
-webkit-animation:jump 1s infinite; -moz-animation:jump 1s infinite; -o-animation:jump 1s infinite; -ms-animation:jump 1s infinite; animation:jump 1s infinite; }
#ball::after { content:""; width:80px; height:40px; position:absolute; left:30px; top:10px; z-index:10; }
#ballShadow { position:absolute; left:50%; bottom:0; z-index:10; margin-left:-30px; width:60px; height:75px; background:rgba(0, 0, 0, .1);
box-shadow:0px 0 20px 35px rgba(0,0,0,.1); border-radius:30px / 40px; -webkit-transform:scaleY(.3); -moz-transform:scaleY(.3);
-ms-transform:scaleY(.3); -o-transform:scaleY(.3); transform:scaleY(.3); -webkit-animation:shrink 1s infinite; -moz-animation:shrink 1s infinite;
-o-animation:shrink 1s infinite; -ms-animation:shrink 1s infinite; animation:shrink 1s infinite; }
@-webkit-keyframes jump { 0% {top:0; -webkit-animation-timing-function:ease-in; }
40% {} 50% {top:120px; height:120px; -webkit-animation-timing-function:ease-out; }
55% {top:160px; height:120px; border-radius:70px / 60px; -webkit-animation-timing-function:ease-in;}
65% {top:120px; height:120px; border-radius:70px; -webkit-animation-timing-function:ease-out;}
95% { top:0; -webkit-animation-timing-function:ease-in; } 100% {top:0; -webkit-animation-timing-function:ease-in; } }
@-moz-keyframes jump { 0% {top:0; -moz-animation-timing-function:ease-in; }
40% {} 50% {top:120px; height:120px; -moz-animation-timing-function:ease-out; }
55% {top:160px; height:120px; border-radius:70px / 60px; -moz-animation-timing-function:ease-in;}
65% {top:120px; height:120px; border-radius:70px; -moz-animation-timing-function:ease-out;}
95% { top:0; -moz-animation-timing-function:ease-in; } 100% {top:0; -moz-animation-timing-function:ease-in; } }
@-o-keyframes jump { 0% {top:0; -o-animation-timing-function:ease-in; }
40% {} 50% {top:120px; height:120px; -o-animation-timing-function:ease-out; }
55% {top:160px; height:120px; border-radius:70px / 60px; -o-animation-timing-function:ease-in;}
65% {top:120px; height:120px; border-radius:70px; -o-animation-timing-function:ease-out;}
95% { top:0; -o-animation-timing-function:ease-in; } 100% {top:0; -o-animation-timing-function:ease-in; } }
@-ms-keyframes jump { 0% {top:0; -ms-animation-timing-function:ease-in; } 40% {} 50% {top:120px; height:120px; -ms-animation-timing-function:ease-out; }
55% {top:160px; height:120px; border-radius:70px / 60px; -ms-animation-timing-function:ease-in;}
65% {top:120px; height:120px; border-radius:70px; -ms-animation-timing-function:ease-out;}
95% { top:0; -ms-animation-timing-function:ease-in; } 100% {top:0; -ms-animation-timing-function:ease-in; } }
@keyframes jump { 0% { top:0; animation-timing-function:ease-in; } 50% { top:120px; height:120px; animation-timing-function:ease-out; }
55% { top:160px; height:120px; border-radius:70px / 60px; animation-timing-function:ease-in; }
65% { top:120px; height:120px; border-radius:70px; animation-timing-function:ease-out; }
95% { top:0; animation-timing-function:ease-in; } 100% { top:0; animation-timing-function:ease-in; } }
.foo { cursor: auto; cursor: url(shoe1.png) 4 12, auto; }
#clouds { top:0px; position:relative; -webkit-animation:move 40s infinite linear; -moz-animation:move 40s infinite linear; -ms-animation:move 40s infinite linear; z-index:1; }
#clouds2 { position:relative; -webkit-animation:backup 30s infinite linear; -moz-animation:backup 30s infinite linear; -ms-animation:backup 30s infinite linear; z-index:2; }
.cloud1 { width:200px; height:113px; background:url(4.png) no-repeat; position:absolute; top:10px; }
.cloud1:after { content:''; position:absolute; background:url(4.png) no-repeat; top:-40px; left:20px; }
.cloud1:before { content:''; position:absolute; background:url(4.png) no-repeat; top:-60px; right:30px; }
.cloud2 { width:200px; height:109px; background:url(5.png) no-repeat; position:absolute; top:100px; left:400px; }
.cloud2:after { content:''; position:absolute; background:url(5.png) no-repeat; top:-20px; left:10px; }
.cloud2:before { content:''; position:absolute; background:url(5.png) no-repeat; top:-30px; right:15px; }
.cloud3 { width:`00px; height:55px; background:url(6.png) no-repeat; position:absolute; top:60px; left:740px; }
.cloud3:after { content:''; position:absolute; background:url(6.png) no-repeat; top:-40px; left:20px; }
.cloud3:before { content:''; position:absolute; background:url(6.png) no-repeat; top:-60px; right:30px; }
@-webkit-keyframes move { 0% {left:0px;} 49% {left:940px; opacity:1;} 50% {left:940px; opacity:0;} 51% {left:-940px; opacity:0;} 52% {left:-940px; opacity:1;} 100% {left:0px;} }
@-webkit-keyframes backup { 0% {left:-940px;} 100% {left:940px;} }
@-moz-keyframes move { 0% {left:0px;} 49% {left:940px; opacity:1;} 50% {left:940px; opacity:0;} 51% {left:-940px; opacity:0;} 52% {left:-940px; opacity:1;} 100% {left:0px;} }
@-moz-keyframes backup { 0% {left:-940px;} 100% {left:940px;} }
@-ms-keyframes move { 0% {left:0px;} 49% {left:940px; opacity:1;} 50% {left:940px; opacity:0;} 51% {left:-940px; opacity:0;} 52% {left:-940px; opacity:1;} 100% {left:0px;} }
@-ms-keyframes backup { 0% {left:-940px;} 100% {left:940px;} }
.tit { font:bold 26px Georgia, "Times New Roman", Times, serif; text-align:center; color:#000; text-shadow:1px 1px #fff; padding-top:10px; }

<div class="container foo">
<div class="tit">3D FootBall Jumping Animation CSS3 by Muthujoo</div>
<h4 style="text-align:center;">Hold Your Mouse on the ball to Goal</h4>
<div id="clouds">
<div class="cloud1"></div>
<div class="cloud2"></div>
<div class="cloud3"></div>
</div>
<div id="clouds2">
<div class="cloud1"></div>
<div class="cloud2"></div>
<div class="cloud3"></div>
</div>
<section class="main">
<div id="ballWrapper">
<div id="ball"><img src="ball1.png"></div>
<div id="ballShadow"></div>
</div>
</section>
</div>

Tagged in:

• 3d animation css3
• css3 animation
• ball animation css3
• 3d ball css3