Robot Walkking Animation css3

body { background:url(bg.jpg) }
h1 { font:bold 24px 'Roboto'; color:#FFF; }
#Walking_robot { width:700px; height:150px; margin:50px auto; text-align:center; }
.body { float:left; position:absolute; }
.robot_head { width:90px; height:95px; background:url(head.png) no-repeat; position:absolute; margin-top:34px; margin-left:-18px; }
.Middlepart { background:url(body.png) no-repeat; width:140px; height:198px; position:absolute; margin-top:125px; margin-left:-50px;}
.left_hand { margin-top:140px; position:absolute; margin-left:-5px; height:232px; width:60px; background:#000; float:left; background:url(hand.png) no-repeat; }
.right_hand { margin-top:140px; position:absolute; margin-left:-25px; height:232px; width:60px; background:#000; float:left; background:url(hand.png) no-repeat; }
.left_leg { margin-top:280px; position:absolute; margin-left:45px; height:225px; width:60px; background:url(leg1.png) no-repeat; float:left; }
.right_leg { margin-top:280px; position:absolute; margin-left:5px; height:225px; width:60px; background:url(leg1.png) no-repeat; float:left; }
.left_hand { -moz-transform-origin:0 0; -moz-animation:movement1 0.5s alternate infinite ease-out; z-index:-1;}
.right_leg { -moz-transform-origin:0 0; -moz-animation:movement1 0.5s alternate infinite ease-out; }
.right_hand { -moz-transform-origin:0 0; -moz-animation:movement2 0.5s alternate infinite ease-in; }
.left_leg { -moz-transform-origin:0 0; -moz-animation:movement2 0.5s alternate infinite ease-in; z-index:-1;}
@-moz-keyframes movement1 { from { -moz-transform:rotate(-30deg); } to { -moz-transform:rotate(30deg); } }
@-moz-keyframes movement2 { from { -moz-transform:rotate(30deg); } to { -moz-transform:rotate(-30deg); } }
.robot_body { margin-left:350px; -moz-animation:robot_body 9s infinite ease-in; }
@-moz-keyframes robot_body { from {margin-left:30px;} to {margin-left:600px;} }
.left_hand, .right_leg { -webkit-transform-origin:0 0; -webkit-animation:movement1 0.5s alternate infinite ease-out; }
.right_hand, .left_leg { -webkit-transform-origin:0 0; -webkit-animation:movement2 0.5s alternate infinite ease-in; }
@-webkit-keyframes movement1 { from { -webkit-transform:rotate(-30deg); } to { -webkit-transform:rotate(30deg); } }
@-webkit-keyframes movement2 { from { -webkit-transform:rotate(30deg); } to { -webkit-transform:rotate(-30deg); } }
.robot_body { margin-left:350px; -webkit-animation:robot_body 9s infinite ease-in; }
@-webkit-keyframes robot_body { from {margin-left:30px;} to {margin-left:600px;} }

<div id='Walking_robot'>
<div class='robot_body'>
<div class='body'>
<p class='robot_head'></p>
<p class='Middlepart'></p>
<p class='left_hand'></p>
<p class='right_hand'></p>
</div>
<p class='left_leg'></p>
<p class='right_leg'></p>
</div>
</div>

Tagged in:

• robot css3
• robot animation css3
• robot walking css3
• robot walking animation