考虑到这个proof of concept，是否可以通过 JavaScript 为左侧边距（负值和正值）设置动画？.. 你将如何去做？
注意：我知道这只是 WebKit。我对此很好，因为我正在为 iOS Safari 进行开发。
更新
感谢回答，但是jQuery的animate函数不支持纯CSS动画，这是我需要的。
【问题讨论】：
标签： ios css webkit mobile-safari
我知道你特别说“你能在 JavaScript 中做到这一点”，但你不应该需要使用 JavaScript。我相当确定您链接到的概念证明仅使用 jQuery 作为使动画回退到 JavaScript 的一种方式，以便所有浏览器都可以很好地处理动画。由于您是专门为 Mobile Safari 开发的，因此您不需要为此使用 jQuery，除非使用历史插件来推送和弹出状态以使浏览器的后退按钮起作用；这完全可以通过 CSS 过渡属性和 :target 伪选择器实现。
因此，作为替代方案，您应该能够执行以下操作：
在 HTML 中：
<div id="thing-that-will-transition">
<a href="#thing-that-will-transition>click this to transition the div</a>
</div>
在 CSS 中：
#thing-that-will-transition
{
(bunch of properties)
-webkit-transition: margin-left [the rest of your transition values]
}
#thing-that-will-transition:target
{
margin-left: [your properties]
}
只要您的片段 URL 与您要转换的元素的名称相匹配，那么您应该能够使用 JavaScript 将片段推送到 URL，如果您绝对必须这样做的话在仍然发生过渡的同时使用带有片段href的锚点。而且，如果您使用 jQuery 历史插件或自己推送和弹出历史堆栈，那么您仍然可以获得应用程序的后退按钮行为。
我知道您特别要求使用 JavaScript 解决方案来触发 CSS 动画，但我只是不确定您为什么需要这种解决方案。对不起，如果这对你没有帮助。
更新：Here's a jsFiddle demonstrating the above。它使用this jQuery 历史插件来管理历史堆栈，因此您仍然可以从片段 URL 中获得可接受的后退/前进按钮行为。锚标记在其 onClick 中使用插件的“推送”或“加载”方法，并在 href 属性中使用标准片段作为未启用 JS 的浏览器的后备。
更新 2： Here's another jsFiddle 使用转换/翻译而不是转换。
更新 3（通过 roosteronacid）：
至于通过 JavaScript 获取动画，您可以这样做：
var element = document.getElementById("...");
setTimeout(function ()
{
element.style.webkitTransitionDuration = "0.3s";
element.style.webkitTransitionTimingFunction = "ease-out";
element.style.webkitTransform = "translate3d(300px, 0, 0)";
}, 0);
【讨论】：
translate3d()？
translateX，因为这是边距转换使用的。如果你真的，真的想出于某种原因使用 translate3d()，那么将两个 -webkit-transform defs 替换为 webkit-transform: translate3d(yourValue, 0, 0)
你可以在css3中设置一个transition，然后元素的后续变化就会动画化。
.MY_CLASS {
-moz-transition: all 0.3s ease-out; /* FF4+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5+ */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
-ms-transition: all 0.3s ease-out; /* IE10 */
transition: all 0.3s ease-out;
}
这指定了一个几乎跨浏览器（该死的 IE）过渡，适用于所有 css 更改，持续 0.3 秒并缓和，因此它将在过渡结束时减慢。因此，要向左/向右设置动画，只需更改 css：
$(".MY_CLASS").css("margin-left", "-300px");
请注意，这会将其设置为 300px 的固定位置，如果您想设置相对于其当前位置的位置，请使用：
var mleft = $(".MY_CLASS").css("margin-left");
var newleft = mleft.substr(0, mleft.length-2) + 50;
$('.MY_CLASS').css("margin-left", newleft+"px");
【讨论】：
更好地使用过渡，几乎支持跨浏览器（IE除外），并通过JS设置关键帧。
【讨论】：
这仅适用于 CSS、HTML 和 WebKit：
#wrapper {
width: 700px;
text-align: left;
border-radius:10px;
-moz-border-radius:10px;
border-style:solid;
border-width:1px;
border-color:#ccc;
padding:30px 30px;
-moz-box-shadow: 0px 0px 5px #BBB;
-webkit-box-shadow: 0px 0px 5px #BBB;
box-shadow: 0px 0px 5px #BBB;
-webkit-transition-property: -webkit-transform, margin-left;
-webkit-transition-duration: 3s;
-webkit-transition-timing-function: ease-in;
-webkit-transform: translate(100px);
}
只需在 HTML 文件中创建 <div id="wrapper">Placeholder text</div> 即可对其进行测试。在 Google Chrome 12.0.742.112 和 Safari 5.0.5 (6533.21.1) 中为我工作。如果它没有立即执行动画，可能是由于您的浏览器处理翻译太快（或者可能是缓存？）。您可能会考虑以某种方式添加延迟。我只是非常快地按了几次刷新按钮。为我工作。
编辑： 查看girliemac's 测试页面背后的源代码。那里有一些有见地的东西。另见SO post。
【讨论】：
你可以使用 jquery .animate() - http://api.jquery.com/animate/
查看我的示例 - http://jsfiddle.net/ajthomascouk/jS83H/ - 按 + 和 -
【讨论】：
使用 jQuery 动画 css 边距的工作方式如下：
$( '#mydiv' ).animate({
'margin-left': 'new margin value'
});
【讨论】：
要使用 webkit 的 css 动画，您需要创建一个具有 transform 属性的类，然后您可以使用 jQuery 根据需要添加/删除该类。
【讨论】：