javascript - CSS3 onclick animation -

trying learn basics of css3 animation , onclick events i'm stuck.

i want use button id="3" start animation, red square can see here: https://jsfiddle.net/4swmegpn/ , button id="4" stop/reset animation of red square.

i don't know start. i've started adding onclick to:

<button id="button1" onclick=""> > </button> 

but after can't come do. call , activate "keyframes example" css-file, not sure how to.

you can add , remove class element start / end animation. , in css add animation class (see fiddle). practice not include javascript code in html (like onclick had), rather add event listeners in scripts:

document.getelementbyid('startanim').addeventlistener('click', function() {     document.getelementbyid('red').classlist.add('animate'); });  document.getelementbyid('stopanim').addeventlistener('click', function() {     document.getelementbyid('red').classlist.remove('animate'); }); 

you can use checkbox, hover state or other selectors toggle animation within css. there lots of techniques. depends on need achieve.