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-->

CSS代码

.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%);}
}