Pure CSS3 Animated Fish Tank

Amazing animation and drawing by Tayo Wegner which is done purely in CSS3 (no images). Every object in the fish tank is drawn using CSS shapes only. Although, 3k lines of CSS code make it a little difficult to understand. It works great in Chrome/Safari and Firefox. View Online In BLogger : http://pambah-timeline.blogspot.com/

by Palma Hutabarat92

HTML

<div id="wrap">
	<div class="window">
		<div class="fishtank_wrap">
			<div class="fishtank">
			
				<div class="bubble_wrap">
					<div class="bubbles b0"></div>
					<div class="bubbles b1"></div>
					<div class="bubbles b2"></div>
					<div class="bubbles b3"></div>
					<div class="bubbles b4"></div>
					<div class="bubbles b5"></div>
				</div>
				<div class="bubble_wrap bw2">
					<div class="bubbles b6"></div>
					<div class="bubbles b7"></div>
					<div class="bubbles b8"></div>
				</div>
				<div class="water"></div>
				<div class="fish_wrap">
					<div class="fred">
						<div class="top_fin"></div>
						<div class="tail_fin"></div>
						<div class="fish_body">
							<div class="eye"></div>
							<div class="scale_1"></div>
							<div class="scale_2"></div>
							<div class="scale_3"></div>
							<div class="scale_4"></div>
						</div>
						
					</div>
				</div>
				
				<div class="ground"></div>
				<div class="rock_1"></div>
				<div class="rock_2"></div>
				<div class="rock_3"></div>
				<div class="rock_4"></div>
				<div class="rock_5"></div>
				<!-- end of rocks -->
				<div class="plant_1_wrap">
					<div class="plant_1"></div>
					<div class="plant_2"></div>
					<div class="plant_3"></div>
				</div>
				<div class="plant_2_wrap">
					<div class="plant_4"></div>
					<div class="plant_5"></div>
				</div>
				<div class="long_plant">
					<div class="l_plant_1"></div>
					<div class="l_plant_2"></div>
					<div class="l_plant_3"></div>
				</div>
				<div class="long_plant2">
					
					<div class="l_plant_2"></div>
					<div class="l_plant_3"></div>
				</div>
				<div class="water"></div>
				
			</div><!-- end of fishtank -->
		</div><!-- end of fishtank_wrap -->
	</div><!-- end of window -->
</div>
<div class="table"></div>

CSS

/*	Pure CSS3 fish tank demo demonstrating Css3 animation keyframes and some new technics that CSS3 can offer.

Copyright (C) 2012  Tayo Wegner 
Let Pixels Take Over: www.lpto.net.    
Email: [email protected]

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
/* ...............< Pure CSS3 animated fish tank demo >..................  */

body{
	background-color: #393939;
	margin:0px;
}
/* start of globals */
a{
	text-decoration:none;
	color:cornflowerblue;
}
h1{
	text-align:center;
	color: #717273;
}
/* end of globals */
/* start of wrap */
#wrap{
	width:970px;
	margin:auto;
	font-family:tahoma,ariel;
	position:relative;
}
.clear{
	clear:both;
}
/* end of wrap */
.window{
	/*border:1px solid #191919;*/
	width:950px;
	height:500px;
	position:relative;
	z-index: 20;
}
/* ...............< fish tank  >.................. */
.fishtank_wrap{
	border:1px solid #191919;
	width:850px;
	height:400px;
	margin:auto;
	margin-top:50px;
	position:relative;
	overflow: hidden;
	border-right:20px solid #191919;
	border-left:20px solid #191919;
	border-bottom:8px solid #191919;
}
.water{
	background-color: rgba(100, 148, 237, 0.09);
	border-top: 1px solid #191919;
	border-bottom: 1px solid #191919;
	height: 349px;
	position: absolute;
	top: 30px;
	width: 850px;
	z-index: 160;
}
.fishtank{
	box-shadow: 0 -10px 24px #817F7F inset, 0 -100px 134px #DCDCDC inset;
	-moz-box-shadow: 0 -10px 24px #817F7F inset, 0 -100px 134px #DCDCDC...