问题标签 [css-animations]

据我了解，没有这样的事情我们可以使用 css 过渡来实现，但我们不能使用 css 动画来实现，反之亦然。

也就是说，任何过渡都具有等效的 css 动画。比如这个

相当于以下内容：

我的问题是 - 如果我们谈论支持 CSS 转换和动画的浏览器，选择一种或另一种方法的用例是什么？至于过渡，我只能举出一个——它们的语法更简洁，我们不必为@-moz-keyframes、@-webkit-keyframes 等复制粘贴大量代码。

至于来自 javascript 的控制，灵活性和复杂性动画是更合适的工具（至少，乍一看）。那么，什么是用例？

UPD： 好的，让我尝试列出问题中发现的有趣信息。

• 这是由 Roman Komarov 提供的。比如说，我们有一个 div 和一个子 div。当父 div 悬停时，我们正在转换子元素。一旦我们拿走鼠标，过渡就会被取消。取消的持续时间正是我们已经花费在过渡上的时间。动画“立即”取消。不过，我不知道这两种行为有多标准。

使用keyframes，可以在元素插入 DOM 后立即对其进行动画处理。这是一些示例 CSS：

是否有一些类似的功能可用于在元素从 DOM 中删除之前将动画（通过 CSS，无 JavaScript）应用于元素？下面是我为了玩这个想法而制作的一个 jsFiddle；如果您知道解决方案，请随时分叉。

jsFiddle - http://jsfiddle.net/skoshy/dLdFZ/

我正在尝试为页面上的文本创建动画，每隔几秒钟，将一个单词与列表中的另一个单词进行更改。示例：我有一个标题，上面写着“这很酷”，但我希望每隔几秒钟将“酷”替换为“整洁/真棒/groovy/etc”。

老实说，我不确定解决这个问题的最佳方法（就使用什么技术而言），而且我找不到适用于现代浏览器的代码简介。非常感谢您的帮助！

为什么这不起作用？我究竟做错了什么？

CSS

演示

http://jsfiddle.net/hAGKv/

提前致谢！

我希望在通过 JS 添加弹出窗口的 .show 类时激活我的关键帧动画。但是动画仅在页面加载时被激活。

这是我的JS代码。

我的 CSS

我怎样才能使它在添加显示类时激活动画。

我正在尝试在没有关键帧的情况下在我的 css 中链接多个 -webkit-transition 动画。

我知道如果我调用关键帧动画是可能的，但我只想覆盖这些属性，而这个 JS 中的某些东西不起作用：

这是小提琴：http: //jsfiddle.net/a2co/Tn9mT/25/

我正在尝试使用 webkit 转换让文本从左向右滑动。我意识到我可以用<marquee>它来做到这一点（即使它正在消失），但我需要使用关键帧更好地控制动画。下面的 CSS 似乎没有向任何方向移动文本，我无法想象为什么。

HTML：

CSS：

以下 CSS 在 Webkit 中运行良好。还没有在 Opera 中检查过，但我知道它在 Firefox 中不起作用。谁能告诉我为什么？

正确的类肯定会应用到我的 HTML（用 Firebug 检查它，我确实看到了-moz-animation: 500ms ease 0s normal forwards 1 arrowRotateDot属性.arrow）。

这在 IE9 中也不起作用，尽管我最初确实有-ms-animation:...和-ms-transform:.... 我认为它应该在 IE9 中工作，但当它不支持时，我只是假设 IE 还不支持这些。然而，既然它不能在 Firefox 中运行，也许还有其他事情正在发生。

我遇到了一个小问题，试图让动画在动画中间停止，优雅地返回默认状态。我正在使用:hover父元素上的伪类将动画应用于子元素，但希望动画在我停止悬停在元素上时优雅地返回到默认状态。我觉得我不应该在:hover这里使用伪类，还有另一种接近它的方法，但我似乎无法弄清楚如何让它过渡。它只是立即恢复到基本状态，这当然是有道理的，因为动画正在被剥离——但这不是想要的效果。这是当前的 HTML：

和当前的 CSS

回顾一下：悬停时图像上有闪烁的白色效果。我希望它在我停止悬停时动画回到原始关键帧，而不是突然恢复到“关闭”。我可以更改 HTML 或 CSS；对如何使其工作没有任何限制。

我学习 CSS 动画，我有一个问题。

这是我的例子：

http://jsfiddle.net/MBJbB/ 注意：仅在 WebKit 浏览器中工作。

我有 2 个关键帧。我将“第一”设置为重复 3 次。

在运行 3 次的“第一个”关键帧之后，我想调用“第二个”无限次。