问题标签 [webkit-animation]

我有一个元素，我有一组 @-webkit-keyframes 来制作动画。在页面加载时，这些关键帧运行，并且介绍看起来很棒。

接下来，我在悬停时有第二组@-webkit-keyframes 并设置为重复，所以在悬停时，该元素具有循环动画。这也很好用。

然而，当我将鼠标从元素上移开时，第一组（介绍）关键帧再次运行。我不希望它在第一次运行后运行。有没有一种简单的方法可以在 CSS 中防止这种情况发生？

我所拥有的最小示例

另外，拥有 1500+ 声誉的人可以编辑标签并添加 webkit-animation 标签吗？我不敢相信它还没有被创建......：\

我写了一个关键帧动画：

我想在使用以下 html 和查询代码代码制作的矩形上运行此动画：

问题是当我单击按钮时没有任何反应。我对 jquery 不是很好，所以这可能是问题所在。

非常感谢您的帮助！

马特

webkit-animation 是否有任何回调完成？看例子

但是这个回调不起作用

嗨，我一直在试图弄清楚如何通过单击另一个 div 将我的 css3 -webkit-animation-play-state 从暂停更改为运行。有谁知道我会怎么做？我假设我需要使用 JavaScript。

我一直在为 iPad 和其他平板电脑编写一个 web 应用程序，并且在考虑到正确和有效的定位和动画方面遇到了很多视口问题。我最近想出了对所有自由浮动元素使用 -webkit-transform 的想法。我的问题是，使用 CSS 规范提供的转换是否会比更改元素内部的 lrtb 值更好地实现流畅可靠的动画position:relative？ 启用硬件加速后，我发现移动元素会随机闪烁，尤其是在方向变化期间。（绝对定位的元素）所以，由于没有著名的博客使用这种方法，我想检查是否有一些专业提示的原因，这是一个坏主意。

我有一个具有图像内容的 div。我想在单击图像时实现动画，但它仅在第一次单击时才起作用，而在图像中的下一次单击是无效的。什么是问题，我该如何解决？

和

我在 Android 4.x 浏览器/webview 中停止或暂停动画时运气不佳。我将 -webkit-animation-iteration-count 设置为无限，在 Chrome/Safari 中停止它没有问题，但如果元素有动画子元素，它在 Android 中会失败。

我的 HTML：

我的 JS：

你可以在这个fiddle中看到问题。如果我取消注释内容的停止（删除动画类），那么我可以停止动画。

我想这可能是一些我无法理解的冒泡问题？或者它是一个Android错误？我也尝试通过 JS 直接操作样式，并将 webkitAnimationPlayState 设置为暂停而不是更改类，但这没有任何改变。

请注意，小提琴可以在 Android 上的 Chrome 中使用，但不能在普通浏览器中使用——因为 webview 我需要它。

我正在为移动网站制作 css3 加载动画。加载器使用以下 HTML / CSS 可以正常工作：

HTML：

CSS：

但是，在 mobil safari 上查看动画时，当页面被滚动/触摸时，动画会暂停。即使用户正在滚动页面，有没有办法让动画继续播放？

谢谢！

我正在尝试使用 webkit 动画应用简单的下雨效果，在 ipad 2 上运行良好，没有问题，但在较新的视网膜显示 ipad 上运行非常缓慢：

我已经看到提到使用 3d 变换来触发 ios 中的硬件加速，但是当将它们直接应用到此类时，动画会停止，我什至不确定这些是否会有所作为。

我知道这个问题可能是iOS Webkit 动画性能仅在视网膜显示上受到影响的重复，但很久以前就有人问过这个问题，但没有真正的结论。

这个问题有什么解决办法吗？或者任何可以稍微提高性能的东西？

我在 div 上使用 -webkit-animation，如下所示：

与关键帧；

我的问题是，据我了解，这应该是一次性动画，但是当我使用 jQuery 淡出/隐藏和淡入/显示 div 时，就像每次都添加规则一样，因此每次显示 div 时都会完成动画或淡入。

这是 WAD 还是某种错误？，有没有办法避免这种行为？

我想只制作一次动画，然后使用 div 播放而不每次都触发动画。

谢了。