Iphone Javascript中的WebKit CSS转换和动画

我正在开发一个IPhone网络应用程序。我刚开始玩webkit转换和webkit动画CSS规则。我有一些问题：例如，使用这些工具而不是jQuery.animate（…）有真正的优势吗？由此产生的动画似乎没有那么快。让我们更好地解释一下：我有一系列的图像我必须在屏幕上移动，就像一个画廊。。。我将每个图像设置为如下CSS规则：

-webkit-transition-property: left, top, right, bottom, width;
-webkit-transition-duration: 200ms;

然后，我用新坐标更改要移动的每个元素的style.left和style.top。结果没有我预料的那么快。它或多或少和jQuery一样快（一点也不流畅）。我甚至看到了

-webkit动画

和

-webkit转换

，但我仍然不知道如何正确使用它们。第一种方法允许我移动物体，但不生成动画，我使用以下代码：

var trans = "translate(" + x + "px," + y + "px)";
ELEMENT.style.webkitTransform = trans;

使用此选项，元素将四处移动，但不带动画。如果我使用以下内容动态创建动画：

var lastSheet = document.styleSheets[document.styleSheets.length - 1];
lastSheet.insertRule("@-webkit-keyframes "+ "animX" + "{ from { top: "+oy+"px; left:"+ox+"px;} to {top: " + y + "px; left: " + x + "px; } }",lastSheet.cssRules.length);
ELEMENT.style.webkitAnimationName = "animX";

这样，元素将移动一次，而不是如此流畅，并将返回到原来的位置。重复此代码不会导致任何结果

---

你认为，在运动的流动性方面，使用这些工具有什么真正的优势？如果是的话，如何正确使用它们？

类似的功能应该可以满足您的需要，并且在我的iPhone 4上的Safari中运行非常平稳：

<style type='text/css'>

    #element {

        position: absolute;
        top: 0px;
        left: 0px;
        -webkit-transition-property: top, left, bottom, right;
        -webkit-transition-duration: 300ms;
        -webkit-transition-timing-function: ease-in;

    }

</style>

<script type='text/javascript'>

    document.querySelector('#element').style.left = '300px';

</script>

#元素{
位置：绝对位置；
顶部：0px；
左：0px；
-webkit转换属性：顶部、左侧、底部、右侧；
-webkit转换持续时间：300ms；
-webkit过渡计时功能：易用；
}
document.querySelector（'#element'）.style.left='300px'；