transform造成的border-radius失效

在移动端写一个类似进度条的动画时遇到了一个问题。父元素设置border-radius属性，然后overflow:hidden。子元素一开始没问题，但是加了animate动画后，原来的边界变圆了。该隐藏的地方都溢出来了。一开始以为是仓位定位问题，后来换成保证金方式还是不行。后来发现可能是transform的问题。加一行-webkit-transform:rotate(0deg)就解决了，附上代码