CSS3动画在Chrome/Safari上显示不同的结果

我正在使用

skew（）

变换制作CSS3关键帧动画。我能够实现我在Safari 6中所期望的结果。然而，当我在另一个Webkit浏览器上查看页面时，我得到的动画效果不同

这是我的密码：

HTML

---

还有其他人有这个问题吗？

对我来说很好。你得到了什么结果？是的，但Safari和Chrome的动画时间似乎不同。Chrome似乎在动画开始和结束时都加快了速度。然而，Safari的计时/速度更加统一。

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

#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);
    }
}