问题标签 [css-animations]

我已经建立了一个 ken burn 效果，以及一些如何使它变得平滑。问题在于，当用户在触摸屏设备上滚动屏幕时，动画会出现抖动。

我虽然通过暂停滚动动画可能会解决这个问题，但它没有。动画很好，直到用户滚动然后它变得生涩。我已经设置了一个小提琴。

http://jsfiddle.net/gxUhH/58/

有任何想法吗？

我正在使用 PhoneGap 构建一个 iPad 应用程序。我正在尝试对动画使用 CSS 转换，但我不完全确定我正在使用正确的方法来利用设备可能支持的任何硬件加速。

这是一个模态窗口 (DIV)，我想从页面顶部向下滑动。它会从屏幕顶部开始定位，然后通过 jquery 添加一个类来动画到页面本身：

当部署到装有 iOS 4 的 iPad 2 上时，这可以工作，但动画有点生涩。这不是一个完全流畅的动画。我应该使用不同的 CSS 来处理这个问题吗？或者这可能只是作为 PhoneGap 应用程序和有问题的 DIV 具有大背景图像的副作用？

我正在尝试使用 css 在缩略图上进行悬停转换，以便在悬停时，背景渐变淡入。转换不起作用，但如果我只是将其更改为一个rgba()值，它就可以正常工作。不支持渐变吗？我也尝试使用图像，它也不会转换图像。

我知道这是可能的，就像在另一篇文章中那样，有人做到了，但我不知道到底是怎么回事。任何帮助>这里有一些 CSS 可以使用：

我正在使用 PhoneGap 构建一个 iOS 应用程序。我正在使用 translate3d CSS 动画来创建“翻转”效果。

这对更简单的元素很有用……一个带有前/后 div 的 DIV，可能还有一个或两个额外的跨度。

但是当我试图翻转一个更大的元素时……即整个屏幕，我会遇到重绘故障。当我交换 css 类开始转换时会发生什么，“底部”div 的部分弹出“顶部”div，然后翻转发生，然后它们再次弹出。并且它不是通过显示的整个元素......它是沿着我正在执行平移 3d 旋转的轴拆分的元素的一半。

关于可能导致这种情况的任何想法或理论？它在 iPad 上作为应用程序和 Safari 桌面上发生的情况相同，因此似乎是 webkit 问题。

会不会是一些 CSS 问题？或者是试图用大背景图片的复杂嵌套元素进行全屏 translate3d 旋转，这超出了 Safari 的处理能力？

更新 1：

我在缩小问题范围方面取得了进展。

发生的情况是，当我进行 translate3d 翻转时“窥视”的元素恰好是之前通过 translate3d 定位的子元素。

我想用 translate3d 转换的“页面”结构：

这可以自己工作。前面的 div 被替换为具有卡片翻转效果的后面的 div。

问题是在进行整页翻转之前，我已经#front使用 translate3d 为 div 中的一些元素设置了动画：

示例 CSS：

如果--而不是使用 translate3d--我只是用top样式重新定位 div 或转换top属性，我不会得到窥视问题。当然，这意味着我必须分别放弃流畅的动画或硬件加速。

在这一点上，它看起来像一个 webkit 错误。我会继续玩它。如果有人以前遇到过这种情况并找到了解决方法，我会全力以赴！

我有一个 CSS 动画，将对象从左向右移动，然后再次使用：

此动画在无限循环中运行。

在某个时刻，我希望对象移动到位置 X，比如 50 像素，然后停止。

我尝试添加第二个动画类（通过 javascript），它将使用以下方法将对象移动到它的最终位置：

但这会导致对象跳转到第二个动画，而不是过渡。

有人对如何在两个动画之间进行几乎补间有任何建议或提示吗？

很简单的问题：

:hover当通过伪选择器（即，:active等）触发动画不合适/不可行时，是否可以利用 css 转换？

我的用例是我想要在表单提交后制作动画。我在想我可以做类似的事情：

然后使用 javascript，我会将shown类添加到我想要动画的这个元素中。

为什么不直接使用 jQuery 或类似的动画？我很高兴你问。CSS 过渡在 iPhone 和其他移动设备上更加流畅，这是我的目标平台。目前我正在使用 jQuery 制作动画，但它们并没有达到应有的流畅度。

编辑以澄清我对伪选择器的要求。

对 CSS webkit 动画非常陌生，并且非常热衷于学习它！还有很多无知！！！所以有几个问题：

1. CSS webkits 的最佳演练/教程/官方网站是什么？
2. 在我的 CSS 文件中编程之前，我是否需要安装 webkit？

谢谢并恭祝安康！

帕里贾特

是否可以在不使用 Javascript 的情况下在页面加载时使用 CSS3 过渡动画？

这是我想要的，但是在页面加载时：

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

到目前为止我发现了什么

• CSS3 transition-delay，一种延迟元素效果的方法。仅适用于悬停。
• CSS3 Keyframe，在加载时工作，但速度极慢。因此没有用。
• CSS3 过渡速度足够快，但在页面加载时没有动画。

为了使用 CSS3 制作一个看起来不错的下拉菜单，我使用动画设置了样式。为了能够更好地控制下降的时间，我使用了动画而不是过渡。我觉得这样更美观。然而，在使用过渡动画时确实会遇到问题，因为反向过程变得更难制作动画。我想知道是否有办法在使用菜单时有效地暂停动画，让它反向动画，就像在过渡中一样。

这是 CSS 现在的样子：

通过将 CSS 设置为交替，并通过重复 2，我可以使菜单上下移动。我正在寻找某种 javascript 解决方案或其他类似的解决方案，以便在迭代之间暂停以允许使用菜单。

我已经意识到我不能简单地通过 coma 分隔来完成下面的相同代码@keyframes mymove, @-moz-keyframes mymove, etc..。为了让它们工作，我需要分别声明它，如下所示。

有没有办法对它们进行分组并使这段代码更短？