How to use animationevent in css3

Question

So I am trying to learn new css3 features to get rid of javascript, but I have some problems with the animationevent "function". On w3.org it gives this definition:

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);
  };

So how should I use it in firefox or chrome? If anyone knows, please give a basic example of where should I write the animation name, like after animationName:, or after typerArg: should I put animationstart; I really have no idea. Thanks!

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

The interface from the W3 specification has to be implemented as follows:

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

This is DOM event. It's JavaScript. The interface describes a DOM event, not a CSS feature.

Using CSS animations

To learn how to use CSS3 animations, read the excellent guide on MDN.
Visit MDN: CSS/Animation to get a concise page which links to the relevant documentation sections of each animation property.

Demo: I've prevously created a simple animation of a swimming fish. See this answer ^(demo). Because it's an "experimental feature", you have to add vendor-specific prefixes to the CSS properties. So, -webkit-animation-name instead of animation-name.

How to use animationevent in css3

1 Answers1

Using CSS animations