如何在 css3 中使用动画事件

【问题标题】：How to use animationevent in css3如何在 css3 中使用动画事件
【发布时间】：2012-07-01 04:25:58
【问题描述】：

所以我正在尝试学习新的 css3 功能以摆脱 javascript，但我对动画事件“功能”有一些问题。在 w3.org 上它给出了这个定义：

interface AnimationEvent : Event {
    readonly attribute DOMString          animationName;
    readonly attribute float              elapsedTime;
    void               initAnimationEvent(in DOMString typeArg, 
                                          in boolean canBubbleArg, 
                                          in boolean cancelableArg, 
                                          in DOMString animationNameArg,
                                          in float elapsedTimeArg);
  };

那么我应该如何在 firefox 或 chrome 中使用它呢？如果有人知道，请给出一个基本示例，说明我应该在哪里写动画名称，比如在animationName：之后，或者在typerArg之后：我应该把animationstart;我真的不知道。谢谢！

【问题讨论】：

标签： html animation css

【解决方案1】：

W3 specification 的接口必须实现如下：

e.addEventListener("animationend", listener, false);  
// listener is a function which receives an object implementing the
//  AnimationEvent interface.

这是 DOM 事件。它是 JavaScript。 界面描述的是 DOM 事件，而不是 CSS 功能。

使用 CSS 动画

要了解如何使用 CSS3 动画，请阅读excellent guide on MDN。
访问MDN: CSS/Animation 获得一个简洁的页面，该页面链接到每个animation 属性的相关文档部分。

演示：我之前创建了一个游泳鱼的简单动画。请参阅this answer ^(demo)。因为它是一个“实验性功能”，所以您必须向 CSS 属性添加 供应商特定前缀。所以，-webkit-animation-name 而不是 animation-name。

【讨论】：