transform致使的border-radius失效

在寫一個移動端的相似進度條的動畫時遇到了一個問題，父元素設置了border-radius屬性，而後overflow:hidden，子元素最初沒有問題，
可是加上了一個animate動畫後，原先邊界處圓角應該隱藏的地方溢了出來，最開始覺得是position定位的問題，
可是改用了margin方式定位仍是不行，後來發現多是因爲transform的問題，
在父元素上加上一行-webkit-transform:rotate(0deg)即解決了，附上代碼

<div class="div-1">  
    <div class="div-1-box">  
        <div class="div-1-animate animate-move"></div>  
    </div><!--div-1-box-->  
</div><!--div-1-->

<style>
    .div-1{width:70%; height:2rem; margin-top:35%; margin-left:15%; background-color:#3a1c98; border-radius:30px; position:relative; box-shadow:0 0 10px 3px #a376d4;}  
    .div-1 .div-1-box{width:60%; height:100%; border-radius:30px; overflow:hidden; -webkit-transform:rotate(0deg);}  
    .div-1 .div-1-box .div-1-animate{width:400%; height:100%; margin-left:-300%; background:url(../images/img_08.png) repeat-x 0 0; background-size:auto 100%;}  
    .animate-move{  
        animation:move 4s linear infinite both;  
        -webkit-animation:move 4s linear infinite both;  
    }  
    @keyframes move{  
        from{}  
        to{transform:translateX(75%);}  
    }  
    @-webkit-keyframes move{  
        from{}  
        to{-webkit-transform:translateX(75%); transform:translateX(75%);}  
    }
</style>