问题标签 [css-animations]

我正在使用 CSS3 学习动画/过渡，但在这段代码中，过渡不起作用......为什么？

HTML：

CSS：

http://jsfiddle.net/LLRfN/

我之前问过这个问题，但我不确定它是否清楚。我已经做了很多故障排除，因为无济于事。所以我回来了，希望能得到一些帮助。

1. 使用 JS，在准备好文档时，我删除了隐藏图像的类并添加了 logoAnim 来设置对象的运动。

2.对象应同时具有 scaleY(2) 效果 - 渗出/滴落效果。

您可以通过 Firefox/Moz 在 JSFiddle 链接中看到正确的效果，但它在 Chrome/Webkit 中不起作用。查看 FF 中的 Firebug 代码，“-moz-animation:2s ease 2s normal none 1 ooze”出现在“.logoAnim”的 CSS 中——它没有出现在 Chrome 的 webkit 版本中。

我错过了什么吗？css的结构/顺序在webkit中重要吗？

http://jsfiddle.net/AfDwu/5/

当我对关联 ::b​​efore 和 ::after 生成内容的元素进行动画处理时，生成的内容（之前为负 z 索引）似乎变得比我的原始元素索引更高。我在 Chrome、Safari 和 Firefox 中看到了这一点。

我知道这很令人困惑，所以这里有一个 fiddle。

有什么想法我哪里出错了，或者我遇到了错误？

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

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

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

我所拥有的最小示例

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

在旋转动画中，适用于 Chrome，但不适用于 Firefox。为什么？

http://jsfiddle.net/WsWWY/

每次我访问带有 CSS3 动画的页面时，我的笔记本都会变得嘈杂（给我一个信号，表明它在那里做了一些繁重的工作）。如果至少生成的动画足够流畅，我不会在意自己。但他们不是。我的 2.4 GHz Core 2 Duo 配备 8GB RAM 和专用 NVIDIA GeForce 320M（不多，但对于某些 css 来说应该足够了，不是吗？...）在某些情况下，我得到的结果是一些生涩的、随机闪烁的有奇怪的工件......“动画”，通常比它的 JS 等价物更糟糕......

有没有人比较过 JS 和 CSS 动画？或者对提议的 CSS3 好东西进行基准测试以供实际使用（例如，其中有多少可以同时出现在页面上而不会严重挂起等）？是否有任何最佳实践（例如 - 这样做，不要那样做，或者您的浏览器会抓取 - 等等）？

http://jsfiddle.net/cD4Gr/1/

这是我的动画代码：

目前，div 只是自动从顶部开始，而不是滑动到顶部。唯一的动画是不透明度。

http://jsfiddle.net/cD4Gr/4/

乐代码：

查看检查器，即使元素位于页面顶部，它仍然说它的底部值为 0。

也许我需要以某种方式反向播放动画？或播放不同的动画？（使用底部百分比，而不是顶部百分比）

我有一个元素，当你无限期地悬停在它上面时，它会旋转。当您悬停时，动画停止。简单的：

但是，当您将鼠标悬停时，动画会突然停止，恢复到 0 度。我想动画回到那个位置，但我在处理语法时遇到了一些麻烦。

任何输入都会很棒！

我在这里尝试了一些繁重的 CSS3 东西，并遇到了一些我希望可以解决的问题：

1 - 我有一个在您加载页面时滑入的框。比方说：

但是，在我的媒体查询中，由于一些调整大小，我需要将其修改为：

我想我可以保持动画名称相同，只需在 @media 查询之一中重新定义关键帧，但这似乎不起作用。为什么？（是的，我设置了正确的前缀）

2 - 我的上述解决方案是为每种尺寸定义不同的动画：

但是，现在在调整站点大小后，动画将在遇到其中一个媒体查询时重新开始。我只希望动画播放一次（无论大小如何，甚至之后调整大小），就是这样。所以除非有#1的解决方案，我相信这是因为当检测到查询时，它有点“重新启动”它的CSS？