Keyframe CSS Android Dance

Keyframe CSS Android Dance

by diaryfakta

HTML

<div class="droid">
  <div class="head">
    <div class="ears">
      <div class="right ear"></div>
      <div class="left ear"></div>
    </div>
    <div class="eyes">
      <div class="right eye"></div>
      <div class="left eye"></div>
    </div>
  </div>
  <div class="body">
    <div class="right arm"></div>
    <div class="left arm"></div>
    <div class="trunk">
    </div>
  </div>
  <div class="foot">
    <div class="right leg"></div>
    <div class="left leg"></div>
  </div>
</div>

CSS

div {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
animation-duration: 2s;

-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.left {
float: right;
}
.right {
float: left;
}

.droid {
padding: 40px;

-webkit-animation-name: kf_droid1, kf_droid2, kf_droid3;
-moz-animation-name: kf_droid1, kf_droid2, kf_droid3;
-ms-animation-name: kf_droid1, kf_droid2, kf_droid3;
animation-name: kf_droid1, kf_droid2, kf_droid3;
}

.head {
width: 200px;
height: 90px;

-webkit-border-radius: 100px 100px 0 0;
-moz-border-radius: 100px 100px 0 0;
border-radius: 100px 100px 0 0;
margin: auto;
background: #9c4;
}

.ears {
width: 150px;
margin: auto;
}

.ear {
width: 8px;
height: 60px;

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #9c4;
margin-top: -20px;
}

.left.ear {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}

.right.ear {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
}

.eyes {
width: 120px;
margin: auto;
}

.eye {
width: 20px;
height: 20px;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
margin-top: 40px;
}

.body {
width: 290px;
margin: 0 auto -50px auto;
}
.arm {
width: 40px;
height: 120px;
background: #9c4;
-webkit-border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
border-radius: 20px 20px 20px 20px;

-webkit-animation-name: kf_arm1;
-moz-animation-name: kf_arm1;
-ms-animation-name: kf_arm1;
animation-name: kf_arm1;
}

.trunk {
    width: 200px;
    height: 170px;
    background: #9c4;

    -webkit-border-radius: 0 0 20px 20px;
    -moz-border-radius: 0 0 20px 20px;
    border-radius: 0 0 20px 20px;
    margin: 5px auto 0...