html5 - How to use animationevent in css3 -
so trying learn new css3 features rid of javascript, have problems animationevent "function". on w3.org gives 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 use in firefox or chrome? if knows, please give basic example of should write animation name, after animationname:, or after typerarg: should put animationstart; have no idea. thanks!
the interface w3 specification has implemented follows:
e.addeventlistener("animationend", listener, false); // listener function receives object implementing // animationevent interface.
this dom event. it's javascript. the interface describes dom event, not css feature.
using css animations
to learn how use css3 animations, read excellent guide on mdn.
visit mdn: css/animation concise page links relevant documentation sections of each animation
property.
demo: i've prevously created simple animation of swimming fish. see this answer (demo). because it's "experimental feature", have add vendor-specific prefixes css properties. so, -webkit-animation-name
instead of animation-name
.
Comments
Post a Comment