问题标签 [css-animations]

所以我今天一直在为我正在开发的应用程序制作一个简单的启动页面

我想使用一些 css 动画来放置移动背景（视差），如下所示
http://css-tricks.com/parallax-background-css3/

我通过 webkit animate 函数在关键帧配置中使用了背景位置移动

这是一个样本

这产生了相当差的性能。背景图像是一个 png32，透明度压缩为 896kb。我尝试使用空白 translate3d 语句启动硬件加速，但没有发生明显的变化。

我还尝试将 background-position 更改为 translate3d ，它移动​​了整个 div 以及它包含的内容。我不确定如何在不影响性能的情况下产生这种效果。

这是测试站点www.auroragm.sourceforge.net

自从我添加了一个 css 过渡（第一个是悬停，第二个是动画），它似乎弄乱了我的字体，它们看起来“不同”。

这太奇怪了，我找了好几个小时都找不到任何东西，我也不知道为什么会这样。

在 Firefox 中似乎没问题，但 safari 和 chrome 有问题。

http://www.simplerweb.co.uk

左下角齿轮动画下方的所有内容看起来都像较轻的字体粗细，导航菜单看起来也一样。

我完全迷失了这个。

这是动画的CSS。

我以为我已经成功地在悬停时旋转了一个齿轮，直到我使用最新的 Chrome v18（重新安装）在另一台 PC 上查看。似乎一些齿轮在旋转时被遮住了。

错误 img - http://dl.dropbox.com/u/67891839/gear.png

代码 - http://jsfiddle.net/seanjacob/JHwC7/

即使您不知道为什么，如果它在您的 Chrome 上运行，请发表评论。

我正在使用 Knockout.js 和 CSS3 动画为 iPad 构建“WebApp”。

不同页面之间的过渡是动画的。我想在动画结束时获得一个 JavaScript 回调。

现在我知道你可以像这样使用 Javascript 来捕获回调：

但是没有更好的方法来做到这一点吗？“淘汰方式”？我想使用data-bindDOM 中的属性绑定回调函数，而不是在我的 javascript 代码中访问 DOM 元素！

有任何想法吗？

编辑：也许我应该补充一点，我是 Knockout.js 的新手，我不知道我想做什么，或者更确切地说，我想如何去做是有意义的，或者你是否只是按照传统方式去做方式！

我有一个 Web 应用程序，而不是原生 Android 应用程序，我们用作加载图标的动画 gif 不显示它的动画。我浏览过其他网站，似乎没有动画 gif 在 Android 上的 Safari 移动设备中工作，但我一直无法找到证明是这种情况的书面确认。有谁知道为什么android浏览器不显示动画GIF？有解决方法吗？我已经看到很多关于在原生应用程序中的 WebView 中显示动画的主题，但对于直接的 Web 应用程序却没有。我必须用css动画创建图像吗？

非常感谢！

我有大约 10 个图标，全部排列成直径约 400 像素的圆形。图标均为 80x80。

我想让这些图标绕一圈旋转，但是当我实现动画时，图标本身当前也在旋转——例如，底部的图标会倒置。

有没有办法让它们一起旋转一圈但保持图标本身直立？

谢谢！

几个月前，我构建了一个动画 CSS3 AT-AT http://www.ruawebdesign.com/css3-at-at。我构建它主要是作为一个学习实验，并看看使用新的 CSS3 功能可以实现什么。像我们构建的大多数东西一样，我将它发布到网上。我没想到它收到的网站会有大量流量。我想可能是朋友和同事的一些观点，但它每周仍然有来自世界各地的几百个观点。

因此，我想让它在 CPU 使用率方面更加精简。由于某种原因，动画会限制内存。我会很感激你们可爱的人对 stackoverflow 的任何反馈，这些反馈可以让人们在没有粉丝参与的情况下查看我的实验。

同样在有人建议使用 javascript/jquery 替代方案之前，请记住我构建它是为了测试 CSS3 的功能。

提前致谢。

所以我有一些原生元素（divs），它们应用了各种效果（border-radius和box-shadow）transform: scale()。当我为它们设置动画时，会发生两件奇怪的事情：

1. 即使我没有尝试为比例设置动画，但如果我不将比例放入动画中，它也会被忽略。
2. 当我将比例放入动画时，Webkit 会模糊元素

请参阅此处的示例：http: //jsfiddle.net/trolleymusic/RHeCL/ - 底部的按钮将触发问题。

第一个问题也发生在 Firefox 中，所以我猜这是因为动画规范应该是这样工作的。不是我想要的，但好吧，我会忍受的。

第二个问题很奇怪。我知道这与3d 变换有关，因为如果我（仅出于测试目的）声明-webkit-perspective或-webkit-transform-style: preserve-3d;在圆形元素上，它也会导致模糊问题。我的困惑是我并没有尝试转换 z 索引，而且我也尝试过使用纯粹translateY而不是translate.

它发生在 Chrome (18)、Chrome Canary (20) 和 Safari (5.1.2 & 5.1.4) 中。

那么，我认为正在发生的事情是对的吗？我怎样才能避免模糊？

最坏的情况：我可以为元素使用不同的大小而不是缩放它们，这不是一个真正的问题 - 但我认为这将是一个更优雅的解决方案，现在这个问题已经出现了。

我有以下 CSS 动画：

基本上，我想做的是：

• 例如，在悬停时（so .border-strobe:hover），我想将边框颜色更改为#FF1D38。

• 一旦我离开悬停，我想简单地让动画运行它的正常进程。

然而，问题是我的课程页面上有一些元素.border-strobe，我想及时保留它们。

是否有一种简单的方法可以使用悬停覆盖边框颜色并保持动画彼此一致，或者目前无法做到这一点？

那有意义吗？

http://jsfiddle.net/uVv65/2/ 为什么反向动画方向和正常一样？我以为它会从

至