css - Chrome/Safari 上的 CSS3 动画效果不同

Question

我正在处理带有skew()变换的 CSS3 关键帧动画。我能够实现我在​​ Safari 6 中寻找的结果。但是，当我在另一个 Webkit 浏览器上查看页面时，Chrome 我得到了不同的动画结果。

这是我的代码：

HTML

<div id="test">
    webkit animation test
</div>

CSS

#test {
    position: absolute;
    left: 200px;
    top: 0px;
    width: 200px;
    height: 200px;
    background-color: rgba(0,0,0,0.5);
    -webkit-animation-name: testBox;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;             /* alternate, normal */
    -webkit-animation-play-state: running;
}

@-webkit-keyframes testBox /* Safari and Chrome */ {
    0% {
        -webkit-transform: skew(70deg,0deg);
    }

    100% {
        -webkit-transform: skew(-70deg,0deg);
    }
}

其他人有这个问题吗？