问题标签 [css-animations]

我希望创建一个动画，每次单击按钮时，对象都会向右移动一定量。

例如，如果对象的初始位置是“left:10px”，并且每 1 个动画循环将其移动 10px，那么第一次单击后它应该是 20px，第二次单击后它应该是 30px，依此类推。

我应该怎么做呢？现在 CSS 动画似乎在每次点击时从对象的初始位置重新开始。

我使用 CSS3 平移动画将对象移动 10 像素

如果最初对象位于 left=10px，那么它现在应该位于 left=20px。但是，当我这样做时

即使在动画之后，它也会返回给我 10px 的值。如何使用 javascript 获取新值？最好是没有 jQuery 或任何其他框架的答案:)

也就是说，如果我将动画设置为 1 秒，它是否总是恰好需要 1 秒（即跳过帧以达到该间隔）？

我的问题的第 2 部分涉及如何在异步 Javascript 调用中使用 CSS 动画。动画完成后，我需要能够回忆起它。

我有一个带有边框的图像。我想让边框淡入淡出。不透明度 + webkit 关键帧可以做到这一点吗？想法？

谢谢

我需要以 50px 的步长在屏幕上平移一个元素。假设每次单击时，元素都会向右移动 50px。

如何更正以下代码？

http://jsfiddle.net/vujMV/13/

这里它每次跳50px，然后平移50px，每次点击总共100px。我需要对运动进行硬件加速（因为它要部署在移动平台上），因此我需要使用 translate()。

我有一个 div 正在做这样的旋转动画：

我想要发生的是，当我触发一个事件（让我们说一个鼠标点击）时，我想将动画的当前 rotateY 存储在一个变量中。例如，如果在动画大约 140 度时触发了点击事件，我希望将 140 度存储在一个变量中。有人知道如何返回当前的 rotateY 值吗？天呐！

这是我的代码： http: //jsfiddle.net/bnookala/b2Yz8/3/这是结果：http: //jsfiddle.net/bnookala/b2Yz8/3/embedded/result/

行为非常简单：单击红色 div 后，会发生 3D 变换，蓝色 div 可见。但是，试图扭转这种行为（通过删除flip类）是行不通的。第二个jQuery.bind没有收到click事件 - 它被红色 div 捕获。这也很明显，输入框（在蓝色 div 中）无法接收鼠标焦点。我试过设置 z-indexes 来解决这个问题，但这似乎不起作用。

原始问题...更新了以下工作代码：

我有一个在 ajax 加载事件期间出现的加载图像。该图像通过向 body 元素添加或删除“加载”类来显示/隐藏。目前，加载图像将背景大小从 0 设置为 100%，并在不透明度中淡化（反之亦然，用于“返回”过渡）。

不过，我想要完成的是让背景大小的过渡在淡出时立即发生（而不是过渡），所以：

• 淡入：不透明度从 0 到 1 在 0.2 秒内，背景大小从 0 到 100% 在 0.2 秒内

• 淡出：不透明度在 0.2 秒内从 1 变为 0，背景大小从 100% 变为 0应立即发生

  /li>

我已将此选择器的转换属性更改.loading #loader .image为“不透明度”而不是“全部”，但它仍然执行背景大小转换。

有谁知道如何使用 css3 实现上述不同的淡入淡出过渡？谢谢！

更新的工作代码

问题是将各个属性（边距、背景）分解为逗号分隔的列表。我相信使用 transition: all 会阻止你进行不同的IN和OUT转换。

zepto.js有一个动画元素的 API，它允许包含一个“完成”回调函数。动画源

但是似乎不支持jquery 类型队列 API 。

我想知道是否有使用 zepto 创建动画序列的内置方法，或者我应该从某个地方捏一个队列功能？

“完成”回调也没有传递任何参数，所以知道你处于动画序列的哪个阶段有点难看 - 也许有一个解决方法？

我正在尝试反弹<div>包含图像的 a，但它不起作用，我不知道为什么。

这是我的代码：