Boating Animation CSS3

img { border:none; }
li { list-style:none; }
.wrap { width:800px; height:580px; border:1px solid #000; background:#00aeff url(images/bg1.jpeg) no-repeat; }
#boat { width:800px; height:585px; margin:0 auto; overflow:hidden; position:relative; }
#boat ul#water{ }
#boat li#water-back { width:1200px; height:84px; background-image:url(images/water1.png); background-repeat:repeat-x; z-index:1; position:absolute; bottom:10px; left:-20px; -webkit-animation:water-back-animation 3s infinite ease-in-out; -moz-animation:water-back-animation 3s infinite ease-in-out;
-o-animation:water-back-animation 3s infinite ease-in-out; -ms-animation:water-back-animation 3s infinite ease-in-out; animation:water-back-animation 3s infinite ease-in-out; }
#boat li#water-front { width:1200px; height:158px; background-image:url(images/water.png); background-repeat:repeat-x; z-index:3; position:absolute;
bottom:-70px; left:-30px; -webkit-animation:water-front-animation 2s infinite ease-in-out; -moz-animation:water-front-animation 2s infinite ease-in-out;
-o-animation:water-front-animation 2s infinite ease-in-out; -ms-animation:water-front-animation 2s infinite ease-in-out;
animation:water-front-animation 2s infinite ease-in-out; }
#boat ul#boat { width:500px; height:215px; z-index:2; position:absolute; bottom:25px; right:0px; overflow:visible; -webkit-animation:boat-in-animation 20s 100 ease-out;
-moz-animation:boat-in-animation 20s 100 ease-out; -o-animation:boat-in-animation 20s 100 ease-out; -ms-animation:boat-in-animation 20s 100 ease-out;
animation:boat-in-animation 20s 100 ease-out; }
#boat ul#boat li { width:200px; height:215px; background-image:url(images/boat.png); position:absolute; bottom:0px; left:0px; overflow:visible;
-webkit-animation:boat-animation 2s infinite ease-in-out; -moz-animation:boat-animation 2s infinite ease-in-out; -o-animation:boat-animation 2s infinite ease-in-out;
-ms-animation:boat-animation 2s infinite ease-in-out; animation:boat-animation 2s infinite ease-in-out; }
#boat #clouds { position:absolute; top:0px; z-index:0; }
#boat #cloud-group-1 { width:720px; position:absolute; left:0px; -webkit-animation:cloud-group-1-animation 30s infinite linear;
-moz-animation:cloud-group-1-animation 30s infinite linear; -o-animation:cloud-group-1-animation 30s infinite linear; -ms-animation:cloud-group-1-animation 30s infinite linear;
animation:cloud-group-1-animation 30s infinite linear; }
#boat #cloud-group-2 { width:720px; position:absolute; left:720px; -webkit-animation:cloud-group-2-animation 30s infinite linear;
-moz-animation:cloud-group-2-animation 30s infinite linear; -o-animation:cloud-group-2-animation 30s infinite linear;
-ms-animation:cloud-group-2-animation 30s infinite linear; animation:cloud-group-2-animation 30s infinite linear; }
#boat .cloud-1 { width:150px; height:83px; background-image:url(images/cloud1.png); position:absolute; top:10px; left:40px; }
#boat .cloud-2 { width:200px; height:110px; background-image:url(images/cloud2.png); position:absolute; top:-25px; left:300px; }
#boat .cloud-3 { width:200px; height:113px; background-image:url(images/cloud3.png); position:absolute; top:-5px; left:530px; }
@-webkit-keyframes boat-in-animation { 0% {left:-200px;} 100% {left:20px;} }
@-moz-keyframes boat-in-animation { 0% {left:-200px;} 100% {left:20px;} }
@-o-keyframes boat-in-animation { 0% {left:-200px;} 100% {left:20px;} }
@-ms-keyframes boat-in-animation { 0% {left:-200px;} 100% {left:20px;} }
@keyframes boat-in-animation { 0% {left:-200px;} 100% {left:20px;} }
@-webkit-keyframes boat-animation { 0% {bottom:0px; left:0px;} 25% {bottom:-2px; left:-2px;} 70% {bottom:2px; left:-4px;} 100% {bottom:-1px; left:0px;} }
@-moz-keyframes boat-animation { 0% {bottom:0px; left:0px;} 25% {bottom:-2px; left:-2px;} 70% {bottom:2px; left:-4px;} 100% {bottom:-1px; left:0px;} }
@-o-keyframes boat-animation { 0% {bottom:0px; left:0px;} 25% {bottom:-2px; left:-2px;} 70% {bottom:2px; left:-4px;} 100% {bottom:-1px; left:0px;} }
@-ms-keyframes boat-animation { 0% {bottom:0px; left:0px;} 25% {bottom:-2px; left:-2px;} 70% {bottom:2px; left:-4px;} 100% {bottom:-1px; left:0px;} }
@keyframes boat-animation { 0% {bottom:0px; left:0px;} 25% {bottom:-2px; left:-2px;} 70% {bottom:2px; left:-4px;} 100% {bottom:-1px; left:0px;} }
@-webkit-keyframes cloud-group-1-animation { 0% {left:0px;} 99.9999% {left:-720px;} 100% {left:0px;} }
@-webkit-keyframes cloud-group-2-animation { 0% {left:720px;} 99.9999% {left:0px;} 100% {left:720px;} }
@-moz-keyframes cloud-group-1-animation { 0% {left:0px;} 99.9999% {left:-720px;} 100% {left:0px;} }
@-moz-keyframes cloud-group-2-animation { 0% {left:720px;} 99.9999% {left:0px;} 100% {left:720px;} }
@-o-keyframes cloud-group-1-animation { 0% {left:0px;} 99.9999% {left:-720px;} 100% {left:0px;} }
@-o-keyframes cloud-group-2-animation { 0% {left:720px;} 99.9999% {left:0px;} 100% {left:720px;} }
@-ms-keyframes cloud-group-1-animation { 0% {left:0px;} 99.9999% {left:-720px;} 100% {left:0px;} }
@-ms-keyframes cloud-group-2-animation { 0% {left:720px;} 99.9999% {left:0px;} 100% {left:720px;} }
@keyframes cloud-group-1-animation { 0% {left:0px;} 99.9999% {left:-720px;} 100% {left:0px;} }
@keyframes cloud-group-2-animation { 0% {left:720px;} 99.9999% {left:0px;} 100% {left:720px;} }
@-webkit-keyframes water-back-animation { 0% {bottom:10px; left:-20px;} 25% {bottom:8px; left:-22px;} 70% {bottom:12px; left:-24px;} 100% {bottom:9px; left:-20px;} }
@-webkit-keyframes water-front-animation { 0% {bottom:-70px; left:-30px;} 25% {bottom:-68px; left:-32px;} 70% {bottom:-72px; left:-34px;} 100% {bottom:-69px; left:-30px;} }
@-moz-keyframes water-back-animation { 0% {bottom:10px; left:-20px;} 25% {bottom:8px; left:-22px;} 70% {bottom:12px; left:-24px;} 100% {bottom:9px; left:-20px;} }
@-moz-keyframes water-front-animation { 0% {bottom:-70px; left:-30px;} 25% {bottom:-68px; left:-32px;} 70% {bottom:-72px; left:-34px;} 100% {bottom:-69px; left:-30px;} }
@-o-keyframes water-back-animation { 0% {bottom:10px; left:-20px;} 25% {bottom:8px; left:-22px;} 70% {bottom:12px; left:-24px;} 100% {bottom:9px; left:-20px;} }
@-o-keyframes water-front-animation { 0% {bottom:-70px; left:-30px;} 25% {bottom:-68px; left:-32px;} 70% {bottom:-72px; left:-34px;} 100% {bottom:-69px; left:-30px;} }
@-ms-keyframes water-back-animation { 0% {bottom:10px; left:-20px;} 25% {bottom:8px; left:-22px;} 70% {bottom:12px; left:-24px;} 100% {bottom:9px; left:-20px;} }
@-ms-keyframes water-front-animation { 0% {bottom:-70px; left:-30px;} 25% {bottom:-68px; left:-32px;} 70% {bottom:-72px; left:-34px;} 100% {bottom:-69px; left:-30px;} }
@keyframes water-back-animation { 0% {bottom:10px; left:-20px;} 25% {bottom:8px; left:-22px;} 70% {bottom:12px; left:-24px;} 100% {bottom:9px; left:-20px;} }
@keyframes water-front-animation { 0% {bottom:-70px; left:-30px;} 25% {bottom:-68px; left:-32px;} 70% {bottom:-72px; left:-34px;} 100% {bottom:-69px; left:-30px;} }
.fish { position:absolute; left:300px; z-index:1000; margin-top:400px; }
.title { position:absolute; left:80px; z-index:1000; margin-top:10px; color:#fff; text-shadow:1px 1px #000; font:bold 16px Georgia, "Times New Roman", Times, serif; }

<div class="wrap">
<div class="container">
<div class="title"><h1>Boating Animation CSS3 by Muthujoo</h1></div>
<div class="fish"><img src="images/fish4.gif" width="200"></div>
<section class="wrapper">
<div id="boat">
<div id="clouds">
<ul id="cloud-group-1"><li class="cloud-1"></li><li class="cloud-2"></li><li class="cloud-3"></li></ul>
<ul id="cloud-group-2"><li class="cloud-1"></li><li class="cloud-2"></li><li class="cloud-3"></li></ul>
</div>
<ul id="boat"><li><img src="images/boat.png"></li></ul>
<ul id="water"><li id="water-back"></li><li id="water-front"></li></ul>
</div>
</section>
</div>
</div>

Tagged in:

• css3 animation
• boating animation css3
• css3 boating animation
• shipping animation