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.
Comments
Post a Comment