How do you create interactive animations using CSS without JavaScript? Perhaps there is only one solution to this need. I wonder if this is the first time we have found it.

What is interactive animation?

Is to respond to the user’s animation, directly on the picture, more intuitive and clear.When the user clicks a button or a heart, it beats.

Interesting points to use in this example

1. Rewrite the checkbox style

We often run into the problem of overwriting the checkbox. This example is useful and worth bookmarking. Here is a direct rewrite of the input style, the idea is as follows:

input {
  display: inline-block;
  width: 36px;
  text-align: center;
}

input::after {
  content: attr(label);
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: white;
  white-space: normal;
  cursor: pointer;
}

input:active::after {
  cursor: wait;
}
Copy the code

2. Two sibling selectors

1. The + sign selector.

Select a single sibling element whose DOM structure is below and adjacent to your own.

2. ~ selector.

Select all sibling elements whose DOM structure is below it.

Sometimes it’s tempting to choose your own sibling elements, regardless of their DOM structure relationships, and CSS currently doesn’t do that. Sometimes we want to select the parent element, which is not currently available in CSS, so this example would be much more flexible if it were. If so, we can also select all sibling elements.

The parent selector is still in the draft stage and is planned for CSS5, which is years away.

3. Checked selectors.

When checkbox status is checked, a set of styles can be applied.

The above three points are the foundation of “pure CSS for interactive animation”. However, there are some basics to know.

4. Style priority.

Styles defined at the bottom of the file override styles at the top — other priorities are not covered here.

5. Animations are usually executed immediately.

The reason for this is that we use the: Checked and sibling selectors to find the target element and animate it. Of course animation also has paly properties.

Had the knowledge point above, basically can begin to do. So why not write something about animation? Because there can be thousands of animations, but just using CSS to make your animations interactive, so far I know of only one, welcome to explore. Transition is not included here.

How to do that?

Combined with the above knowledge points, the following ideas are given.

1. Post the HTML code structure first.

The outer layer of div is wrapped, the example is simple, dispensable. Defines a class that is not used in the example, just as a comment.

<div class="animation-box">
  <input class="init" label="The heart"" type="checkbox">
  <input class="alternating" label="Jump heart" type="checkbox">
  <div class="heart"></div>
</div>
Copy the code

Override the native checkbox style.

The above code has been posted. Here is a simple overwrite of the style, and in real life, you can change it.

Why are there two checkboxes? One class name is init, and one class name is alternating. One is the element that initializes the target (the element that needs to be animated), and the other is the animation that toggles the target element back and forth. Div. Heart is the target animation element. Here’s the idea.

3. Hide the alternating checkbox first.

.alternating {
  display: none;
}
Copy the code

4. When init is selected:

1. Hide yourself

.init:checked {
  display: none;
}
Copy the code

2. Display alternating

.init:checked + .alternating {
  display: inline-block;
}
Copy the code

3. Animate Heart

.init:checked ~ .heart {
  animation-name: init;
}
Copy the code

Immediately after heart is initialized, an animation is executed and the animation property remains on heart. Because init is hidden and always checked. Then the third section of CSS above will always exist.

5. When Alternating is selected, animate Heart with a new animation.

.alternating:checked ~ .heart {
  animation-name: alternating;
}
Copy the code

Since this code comes after init, heart will perform the new animation.

6. When alternating uncheck.

The fifth animation is invalid, init’s animation takes effect again.

So far, the whole idea is clear. Init initializes the animation, and Alternating between checking-and-undoing implicitly animates Heart.

All the code

As mentioned above, animation is not the focus of this article. The focus is on interactive ideas. Hidden, heart no longer implemented here no longer given here. However, in order to get the code and see the effect, I will simply give an animation code that is not an animation.

The following code is all.

<! DOCTYPEhtml>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Pure CSS implements interactive animations</title>
  <style>
    /* .animation-box */
    input {
      display: inline-block;
      width: 36px;
      text-align: center;
    }

    input::after {
      content: attr(label);
      display: inline-block;
      width: 100%;
      height: 100%;
      background-color: white;
      white-space: normal;
      cursor: pointer;
    }

    input:active::after {
      cursor: wait;
    }

    .alternating {
      display: none;
    }

    .init:checked {
      display: none;
    }

    .init:checked~.heart {
      animation-name: init;
    }

    .init:checked+.alternating {
      display: inline-block;
    }


    .alternating:checked~.heart {
      animation-name: alternating;
    }

    .heart {
      animation-duration: 1s;
      animation-fill-mode: forwards;
    }

    / * * / animation
    @keyframes init {
      0% { transform: scale(0.8.0.8); opacity: 1; }
      25% { transform: scale(1.1); opacity: 0.8; }
      100% { transform: scale(0.8.0.8); opacity: 1; }}@keyframes alternating {
      0% { transform: scale(0.8.0.8); opacity: 1; }
      25% { transform: scale(1.1); opacity: 0.8; }
      100% { transform: scale(0.8.0.8); opacity: 1; }}.heart {
      margin: 100px;
      width: 100px;
      height: 100px;
      background: red;
      filter: drop-shadow(0px 0px 20px red);
    }
  </style>
</head>

<body>
  <div class="animation-box">
    <input class="init" label="The heart" type="checkbox">
    <input class="alternating" label="Jump heart" type="checkbox">
    <div class="heart"></div>
  </div>
</body>
</html>
Copy the code

Pure CSS implements interactive animations