(蓮花綻放)animation

今天我在學習transation 時在網上看見一個網友寫的蓮花綻放很炫，我也試着寫咯一下，效果如下所示

html代碼：

<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <!-- <div></div> -->
</div>

css代碼：

body{background-color: #d4d4d4; height: 100%; overflow: hidden;}
    .box{ width: 600px; height: auto; margin:50px auto; position: relative;
        -webkit-transform:rotate(-34deg);
        -moz-transform:rotate(-34deg);
        -0-transform:rotate(-34deg);
        transform:rotate(-34deg);
        /*transition: all 2s linear;*/
    }
    .box >div{ width: 300px; height: 300px; border-radius: 0 300px;  position: absolute; margin-top:100px; left: -38%;opacity: 0.5;/*background: #f36486;border:1px solid orange;*/
        filter:alpha(opacity=50);
        /*IE漸變設置樣式*/ 
        /* 第一個參數：漸變起始位置的顏色
        第二個參數：漸變終止位置的顏色
        第三個參數：漸變的類型
        0 代表豎向漸變        1  代表橫向漸變   
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);
     */
        background: -webkit-linear-gradient(bottom right ,#f36486, #f7829d, #fae3e4);
        background: -moz-linear-gradient(bottom right ,#f36486, #f7829d, #fae3e4);
        background: -o-linear-gradient(bottom right ,#f36486, #f7829d, #fae3e4);
        background: linear-gradient(bottom right ,#f36486, #f7829d, #fae3e4);
        -webkit-transform-origin:100% 100%;
        -moz-transform-origin:100% 100%;
        -o-transform-origin:100% 100%;
        transform-origin:100% 100%;

    }
    .box > div:nth-child(1){
        -webkit-animation: show_1 5s ease-in-out infinite;
        animation: show_1 5s ease-in-out infinite;
    }
    .box > div:nth-child(2){
        -webkit-animation: show_2 5s ease-in-out infinite;
        animation: show_2 5s ease-in-out infinite;
    }
    .box > div:nth-child(3){
        -webkit-animation: show_3 5s ease-in-out infinite;
        animation: show_3 5s ease-in-out infinite;
    }
    .box > div:nth-child(4){
        -webkit-animation: show_4 5s ease-in-out infinite;
        animation: show_4 5s ease-in-out infinite;
    }
    .box > div:nth-child(5){
        -webkit-animation: show_5 5s ease-in-out infinite;
        animation: show_5 5s ease-in-out infinite;
    }
    .box > div:nth-child(6){
        -webkit-animation: show_6 5s ease-in-out infinite;
        animation: show_6 5s ease-in-out infinite;
    }
    .box > div:nth-child(7){
        -webkit-animation: show_7 5s ease-in-out infinite;
        animation: show_7 5s ease-in-out infinite;
    }
    .box > div:nth-child(8){

        -webkit-animation: show_8 5s ease-in-out infinite;
        animation: show_8 5s ease-in-out infinite;
    }
    /*1*/
    @keyframes show_1{
        0%{transform:rotate(0deg);}
        100%{transform:rotate(0deg);}
    }
    @-webkit-@keyframes show_1{
        0%{-webkit-transform:rotate(0deg);}
        100%{-webkit-transform:rotate(0deg);}
    }
    /*2*/
    @keyframes show_2{
        0%{transform:rotate(0deg);}
        100%{transform:rotate(22.5deg);}
    }
    @-webkit-@keyframes show_2{
        0%{-webkit-transform:rotate(0deg);}
        100%{-webkit-transform:rotate(22.5deg);}
    }
    /*3*/
    @keyframes show_3{
        0%{transform:rotate(0deg);}
        100%{transform:rotate(45deg);}
    }
    @-webkit-@keyframes show_3{
        0%{-webkit-transform:rotate(0deg);}
        100%{-webkit-transform:rotate(45deg);}
    }
    /*4*/
    @keyframes show_4{
        0%{transform:rotate(0deg);}
        100%{transform:rotate(67.5deg);}
    }
    @-webkit-@keyframes show_4{
        0%{-webkit-transform:rotate(0deg);}
        100%{-webkit-transform:rotate(67.5deg);}
    }
    /*5*/
    @keyframes show_5{
        0%{transform:rotate(0deg);}
        100%{transform:rotate(90deg);}
    }
    @-webkit-@keyframes show_5{
        0%{-webkit-transform:rotate(0deg);}
        100%{-webkit-transform:rotate(90deg);}
    }
    /*6*/
    @keyframes show_6{
        0%{transform:rotate(0deg);}
        100%{transform:rotate(112.5deg);}
    }
    @-webkit-@keyframes show_6{
        0%{-webkit-transform:rotate(0deg);}
        100%{-webkit-transform:rotate(112.5deg);}
    }
    /*7*/
    @keyframes show_7{
        0%{transform:rotate(0deg);}
        100%{transform:rotate(135deg);}
    }
    @-webkit-@keyframes show_7{
        0%{-webkit-transform:rotate(0deg);}
        100%{-webkit-transform:rotate(135deg);}
    }
    /*8*/
    @keyframes show_8{
        0%{transform:rotate(0deg);}
        100%{transform:rotate(157.5deg);}
    }
    @-webkit-@keyframes show_8{
        0%{-webkit-transform:rotate(0deg);}
        100%{-webkit-transform:rotate(157.5deg);}
    }