0

所以我正在尝试学习新的 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; 我真的不知道。谢谢！

4

1 回答 1

1

W3 规范中的接口必须按如下方式实现：

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

这是 DOM 事件。它是 JavaScript。该接口描述了一个 DOM 事件，而不是 CSS 特性。

使用 CSS 动画

要了解如何使用 CSS3 动画，请阅读MDN 上的优秀指南。
访问MDN：CSS/Animationanimation以获得一个简洁的页面，该页面链接到每个属性的相关文档部分。

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

于 2012-06-30T20:25:58.650 回答