i Robot Dancing With Action

This is an amazing creation by Carpov. This one works only in Firefox and Webkit browsers as it uses the animation property. The whole robot is created using divs and spans which are styled using CSS3 and no images are used. This is a great example of creativity with CSS.

by Palma Hutabarat92

HTML

<div id="page">
	<div id="container">
    
    	<div id="foot" class="left">
        	<div id="f1"></div>
        	<div id="f2"></div>            
        	
            
        	<div id="leg1" class="first">
            	<div id="leg1" class="next1">
                	<div id="leg1" class="next1">
                    	<div id="leg1" class="next1">
                        	<div id="leg1" class="next1"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    	<div id="foot" class="right">
        	<div id="f1"></div>
        	<div id="f2"></div>         
        	        
        	<div id="leg2" class="first">
            	<div id="leg2" class="next2">
                	<div id="leg2" class="next2">
                    	<div id="leg2" class="next2">
                        	<div id="leg2" class="next2"></div>
                        </div>
                    </div>
                </div>
            </div>        
        </div> 
        
        
        <div id="body">
        	<div id="b1"></div>
            <div id="b2"></div>
            <div id="b3"></div>
            <div id="head">
            	<div id="h1"></div>
            	<div id="h2"></div>
                <div id="h3"></div>
                <div id="h4"></div>
                <div id="h5"><span></span></div>
                <div id="eyes">
                	<div id="e">
                    	<div id="e1">
                        	<div id="eye"></div>
                            <span></span>
                        </div>
                        <div id="e2">
                        	<div id="eye"></div>
                            <span></span>
                        </div>
                    </div>
                </div>
                <div id="mouth">
                	<span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
    ...

CSS

body {
	margin:0;
	height: 450px;
	background:#98B8CF;	
	background-image: -webkit-linear-gradient(left , rgb(84,116,137) 0%, rgb(133,160,177) 50%, rgb(84,116,137) 100%);
}
#text {
	margin-top:-150px;
	margin-left:-120px;
	width:120px;
	top:50%; left:50%;
	text-transform:uppercase;
	color:#BE3E1B;
	font-size:100%;
	font-weight:bold;
	text-shadow:-1px 1px 3px #DBC558, -1px 1px 1px #FFF38F;
	text-align:center;
}
div {
	position:absolute;
	-webkit-transform-style:preserve-3d;
}
#page {
	height:100%;
	width:100%;
	
	-moz-perspective:700px;
	background-image: -moz-linear-gradient(left , rgb(84,116,137) 0%, rgb(133,160,177) 50%, rgb(84,116,137) 100%);
}
#container {
	height:300px;
	width:300px;
	top:50%; left:50%;
	margin-top:-150px;
	margin-left:-150px;
	-webkit-box-reflect: below  -7px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(10%, transparent), to(rgba(255,255,255,0.2)));
}
#foot {
	bottom:0;
	width:32px;
	height:20px;
}
.left  {left:90px; -webkit-animation:foot1 6s ease-in-out infinite; -moz-animation:foot1 10s ease-in-out infinite;}
.right {right:90px; -webkit-animation:foot2 6s ease-in-out infinite; -moz-animation:foot2 10s ease-in-out infinite;}

#leg1 {
	height:20px;
	width:12px;
	background:#FF0;
	bottom:20%;
	-webkit-animation:leg1 6s ease-in-out infinite;
	-moz-animation:leg1 6s ease-in-out infinite;
	background:#7AA6C1;
	border:1px solid #000;
	border-radius:5px;
	z-index:3;
}
.first {
	left:10px;
}
.next1 {
	left:-1px;
}
.next2 {
	right:-1px;
}
#leg2 {
	height:20px;
	width:12px;
	background:#7AA6C1;
	border:1px solid #000;
	bottom:20%;
	z-index:3;
	border-radius:5px;
	-webkit-animation:leg2 6s ease-in-out infinite;
	-moz-animation:leg2 6s ease-in-out infinite;
}
@-webkit-keyframes leg1 {
	from {-webkit-transform:rotateZ( 0deg) translateY(-50%);}
	05%  {-webkit-transform:rotateZ(10deg) translateY(-50%);}
	10%  {-webkit-transform:rotateZ( 0deg) translateY(-50%);}
	15%  {-webkit-transform:rotateZ(10deg)...