CSS3 onclick动画

Question

Trying to learn the basics of CSS3 animation and onclick events but I'm stuck.

I want to use button id="3" to start the animation, the red square as you as can see here: https://jsfiddle.net/4swmegpn/ And button id="4" to stop/reset the animation of the red square.

I just don't know where to start. I've started with adding onclick to:

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

But after that I can't come up with what to do. Something to call and activate "keyframes example" from the css-file, but not sure how to.

Answer 1

You can add and remove class to the element to start / end animation. And in CSS add animation to that class (see fiddle ). Also it is a good practice not to include any javascript code in HTML (like onclick you had), but 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 also use checkbox, hover state or other selectors to toggle animation from within CSS. There are lots of techniques. It all depends on what you need to achieve.

Answer 2

Here are some pointers before we start talking about the animation

• You don't need to type doctype and also head , and body tags because the jsfiddle platform do it for you.

• It is good practice to escape < and > with < and > because they can break your HTML code.

• For CSS3 stuff like the animations it is good practice to use Vendor Prefixes , this are browser-specific prefixes that will enable the behavior you are looking for in that browser. Currently there are:

  1. Chrome & Safari: -webkit-
  2. Firefox: -moz-
  3. Opera: -o-
  4. Internet Explorer: -ms-

It is a good practice to leave the non-prefixed CSS3 code for last because it will override all browser-specific stuff above it. So here is an example of what your key-frames should look like:

@-webkit-keyframes tutsFade { /* your style */ }
@-moz-keyframes tutsFade { /* your style */ }
@-ms-keyframes tutsFade { /* your style */ }
@-o-keyframes tutsFade { /* your style */ }
@keyframes tutsFade { /* your style */ }

Now on the animation part - I've created a simplified version of your example here - https://jsfiddle.net/a1d1Lk6f/ What is new is the .exampleAnimation class that contains all you need for an element to start animating with the example animation defined at the bottom of the CSS file. You can add this class directly to an HTML element or control it form JavaScript to start/stop the animation.

Here are some basic tutorials for beginners: Introduction to CSS Animation , Control CSS3 Animations With jQuery .