CSSでアンパンマンを描いてみた

息子がアンパンマンが好きだったので描いていたけど、途中でやめたファイルを見つけたので完成させてみました。
完全な自己満です。

See the Pen anpanman by Yayoi Oda (@marzo) on CodePen.

html

<div id="anpanman">
    <div id="anpan_body">
        <div id="anpan_cape">
            <div id="anpan_cape_inner_body"></div>
            <div id="anpan_cape_inner_0"></div>
            <div id="anpan_cape_inner_1"></div>
            <div id="anpan_cape_inner_2"></div>
            <div id="anpan_cape_inner_3"></div>
            <div id="anpan_cape_inner_4"></div>
            <div id="anpan_cape_inner_5"></div>
            <div id="anpan_cape_inner_6"></div>
            <div id="anpan_cape_inner_7"></div>
            <div id="anpan_cape_inner_8"></div>
            <div id="anpan_cape_inner_9"></div>
            <div id="anpan_cape_inner_10"></div>
            <div id="anpan_cape_inner_11"></div>
            <div id="anpan_cape_inner_12"></div>
        </div>
        <div id="anpan_arm_left"></div>
        <div id="anpan_arm_right"></div>
        <div id="anpan_hand_left"></div>
        <div id="anpan_hand_right"></div>
        <div id="anpan_face"></div>
        <div id="anpan_blow_left"></div>
        <div id="anpan_blow_right"></div>
        <div id="anpan_eye"></div>
        <div id="anpan_mouse"></div>
        <div id="anpan_cheek"></div>
        <div id="anpan_cheek_gloss"></div>
        <div id="anpan_body"></div>
        <div id="anpan_mant"></div>
    </div>
</div>

css

        body{
        background-color: aliceblue;
    }   
    #anpanman{
        position: absolute;
        top:25%;
        left: 25%;
    }
    #anpan_hand_left{
        width: 190px;
        height: 170px;
        background-color: #fd0;
        border-radius: 50%;
        position: absolute;
        top: 150px;
        left: -184px;
        transform: rotateZ(-49deg);
        box-shadow: 0 70px 0 -40px #fc0;
    }
    #anpan_hand_right{
        width: 190px;
        height: 170px;
        background-color: #fd0;
        border-radius: 50%;
        position: absolute;
        top: 150px;
        right: -605px;
        transform: rotateZ(49deg);
        box-shadow: 0 70px 0 -40px #fc0;
    }   
    #anpan_arm_left{
        width: 0;
        height: 0;
        border: 140px solid transparent;
        border-bottom: 100px solid red;
        border-radius: 100%;
        position: absolute;
        top: 130px;
        left: -100px;
        transform: rotateZ(10deg);
    }
    #anpan_arm_right{
        width: 0;
        height: 0;
        border: 140px solid transparent;
        border-bottom: 100px solid red;
        border-radius: 100%;
        position: absolute;
        top: 130px;
        right: -490px;
        transform: rotateZ(-10deg);
    }
    #anpan_face{
        width: 420px;
        height: 390px;
        border-radius: 50%;
        background-color: #f95;
        box-shadow: 0 100px 0 -50px red;
        position: absolute;
        top: 0;
        left: 0;
    }
    #anpan_cheek{
        width: 150px;
        height: 140px;
        border-radius: 50%;
        background-color: #f21;
        position: absolute;
        top: 140px;
        left: 135px;
        box-shadow: -135px 0 0 -5px #f53,135px 0 0 -5px #f53;
    }
    #anpan_cheek_gloss{
        width: 30px;
        height: 30px;
        background-color: #fff;
        position: absolute;
        top: 185px;
        left: 200px;
        box-shadow: -135px 0 0 0 #fff,135px 0 0 0 #fff;
    }
    #anpan_eye{
        width: 35px;
        height: 50px;
        border-radius: 50%;
        background-color: #000;
        position: absolute;
        top: 105px;
        left: 130px;
        box-shadow: 130px 0 0 0 #000;
    }
    #anpan_blow_left{
        width: 85px;
        height: 120px;
        background-color: #f95;
        border-top:3px solid #000;
        border-radius: 50%;
        position: absolute;
        top: 65px;
        left: 100px;
    }
    #anpan_blow_right{
        width: 85px;
        height: 120px;
        background-color: #f95;
        border-top:3px solid #000;
        border-radius: 50%;
        position: absolute;
        top: 65px;
        left: 235px;
    }
    #anpan_mouse{
        width: 220px;
        height: 100px;
        background-color: #f95;
        border-bottom:3px solid #000;
        border-radius: 50%;
        position: absolute;
        top: 200px;
        left: 105px;
    }
    #anpan_cape_inner_0,
    #anpan_cape_inner_2,
    #anpan_cape_inner_4,
    #anpan_cape_inner_6,
    #anpan_cape_inner_8,
    #anpan_cape_inner_10,
    #anpan_cape_inner_12
    {
        position: absolute;
        width: 60px;
        height: 60px;
    }
    #anpan_cape_inner_1,
    #anpan_cape_inner_3,
    #anpan_cape_inner_5,
    #anpan_cape_inner_7,
    #anpan_cape_inner_9,
    #anpan_cape_inner_11
    {
        position: absolute;
        width: 60px;
        height: 60px;
    }
    #anpan_cape_inner_0,
    #anpan_cape_inner_2,
    #anpan_cape_inner_4,
    #anpan_cape_inner_6,
    #anpan_cape_inner_8,
    #anpan_cape_inner_10,
    #anpan_cape_inner_12
    {
        border-radius: 100px;
        /* animation: cape1 ease infinite alternate; */
        background-color:  aliceblue;
    }
    #anpan_cape_inner_1,
    #anpan_cape_inner_3,
    #anpan_cape_inner_5,
    #anpan_cape_inner_7,
    #anpan_cape_inner_9,
    #anpan_cape_inner_11    {
        border-radius: 100px;
        /* animation: cape2 1s ease infinite alternate; */
        background-color: #2e2326;  
    }
    #anpan_cape_inner_0{
        top: 45px;
        left: -110px;
    }
    #anpan_cape_inner_1 {
    top: 60px;
    left: -52px;
}
#anpan_cape_inner_2 {
    top: 45px;
    left: 6px;
}
#anpan_cape_inner_3 {
    top: 60px;
    left: 64px;
}
#anpan_cape_inner_4 {
    top: 45px;
    left: 122px;
}
#anpan_cape_inner_5 {
    top: 60px;
    left: 180px;
}
#anpan_cape_inner_6 {
    top: 45px;
    left: 238px;
}
#anpan_cape_inner_7 {
    top: 60px;
    left: 296px;
}
#anpan_cape_inner_8 {
    top: 45px;
    left: 354px;
}
#anpan_cape_inner_9 {
    top: 60px;
    left: 412px;
}
#anpan_cape_inner_10 {
    top: 45px;
    left: 470px;
}
#anpan_cape_inner_11 {
    top: 60px;
    left: 528px;
}
#anpan_cape_inner_12 {
    top: 45px;
    left: 586px;
}
#anpan_cape_inner_0
{
    border-radius:0 100px 100px 0;
}

@keyframes horizontal {
    0% { transform:translateX( 0px); }
  25% { transform:translateX(  -20px); }
  /* 50% { transform:translateX( 60px); } */
  75% { transform:translateX( 40px); }
  100% { transform:translateX( -20px); }
}
@keyframes vertical {
    0% { transform:translateY(-20px); }
    50% { transform:translateY(  20px); }
    75% { transform:translateY(  0px); }
  100% { transform:translateY(  -20px); }
}
@keyframes cape {
    0%{ transform: translateX(0px)}
    50%{ transform: translateX(3px)}
    100%{transform: translateX(-3px)}
}
@keyframes cape2 {
    0%{
        background-color: #fff;
    }
    50%{
        background-color: #fd0;
    }
    100%{
        background-color: #fff;
    }
}
#anpanman {
    animation: horizontal 1s ease-in-out infinite alternate;
    animation-duration: 5s;
}
#anpan_body{
    animation: vertical 1s ease-in-out infinite alternate;
    animation-duration: 5s;
}
#anpan_cape_inner_0,
    #anpan_cape_inner_2,
    #anpan_cape_inner_4,
    #anpan_cape_inner_6,
    #anpan_cape_inner_8,
    #anpan_cape_inner_10,
    #anpan_cape_inner_12
{
    animation: cape 4s linear infinite alternate;
    animation-duration: 6s;
}
#anpan_cape_inner_1,
    #anpan_cape_inner_3,
    #anpan_cape_inner_5,
    #anpan_cape_inner_7,
    #anpan_cape_inner_9,
    #anpan_cape_inner_11{
    animation: cape 4s linear infinite alternate;
    animation-duration: 6s;
}
#anpan_cape_inner_body{
    position:  absolute;
    width:0;
    height:0;
    top: 80px;
    left: -110px;
    border-top: 320px solid #2e2326;
    border-left: 370px solid transparent;
    border-right: 370px solid transparent;
}
#anpan_cape{
    position: absolute;
    top: 0;
    left: -45px;
}