CSS3 Character Animation

by Umar

HTML

<div id="dora">
    <div id="eyeL" class="circle eye">
        <div class="circle2">
            <div class="circle_0">
                <div class="circle_0_0">
                    <div></div>
                </div>
            </div>
            <div class="circle_1">
                <div class="circle_1_0">
                    <div></div>
                </div>
            </div>
        </div>
        <div id="chon1"></div>
    </div>
    <div id="eyeR" class="circle eye">
        <div class="circle2">
            <div class="circle_0">
                <div class="circle_0_0">
                    <div></div>
                </div>
            </div>
            <div class="circle_1">
                <div class="circle_1_0">
                    <div></div>
                </div>
            </div>
        </div>
        <div id="chon2"></div>
    </div>
    <div id="nose" class="circle">
        <div class="circle2">
            <div class="circle_0">
                <div class="circle_0_0">
                    <div></div>
                </div>
            </div>
            <div class="circle_1">
                <div class="circle_1_0">
                    <div></div>
                </div>
            </div>
        </div>
    </div>
    <div id="undernose" class="straight">
        <div >
        </div>
    </div>
    <div id="uekibati1" class="circle">
        <div class="circle2">
            <div class="circle_0">
                <div class="circle_0_0">
                    <div></div>
                </div>
            </div>
        </div>
    </div>
    <div id="uekibati1_2" class="straight">
        <div >
        </div>
    </div>
    <div id="uekibati1_3" class="circle">
        <div class="circle2">
            <div class="circle_0">
                <div class="circle_0_0">
                    <div></div>
                </div>
            </div>
        </div>
    </div>
    <div id="uekibati2" class="circle">
        <div class="circle2">
      ...

CSS

/************************************************
 Common
************************************************/
#dora{
    width: 330px; height: 490px;
    background-color: white;
}

#dora, #dora *{
    position: absolute;
    overflow: hidden;
}

.circle{
    overflow: visible !important;
}

.circle2{
    width: 200px; height: 200px;
}

.circle_0{
    width: 50%; height: 100%; left: 0; top: 0;
}

.circle_0_0{
    width: 100%; height: 100%;
    left: 100%; top: 0;
    -webkit-transform-origin: 0 50%;    -moz-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;    -ms-transform-origin: 0 50%;
}

.circle_0_0 > div{
    left: -100%; top: 0px;
}

.circle_1{
    width: 50%; height: 100%; left: 50%; top: 0;
}

.circle_1_0{
    width: 100%; height: 100%;
    left: -100%; top: 0%;
    -webkit-transform-origin: 100% 50%;    -moz-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;    -ms-transform-origin: 100% 50%;
}

.circle_1_0 > div{
    left: 0px; top: 0px;
}

.circle_0_0 > div, .circle_1_0 > div{
    border: 5px solid #000000;
    border-radius: 50%;
}

.straight{
    width: 5px;
}

.straight > div{
    width: 100%; left: 0; top: 0;
    background-color: #000000;
}

/************************************************
 Parts
*************************************************
/************************************************
    まるかいてちょん　まるかいてちょん
************************************************/

#eyeL, #eyeR{
    -webkit-transform: scale(1, 1.4);    -moz-transform: scale(1, 1.4);
    -o-transform: scale(1, 1.4);    -ms-transform: scale(1, 1.4);
}

#eyeL{ 
    left: 100px; top: 30px;
}

#eyeR{
    left: 155px; top: 30px;
}

.eye .circle2{
    width: 60px; height: 60px;
}

.eye > div > div > div > div{
    width: 50px; height: 50px;
}

#chon1, #chon2{
    top: 30px;
    width: 15px; height: 15px;
    background-color: #000000;
    border-radius: 100%;
    -webkit-transform: scale(0);    -moz-transform: scale(0);
    -o-transform: scale(0);    -ms-transform:...