How to play and pause CSS animation using CSS custom properties?-CSS Tutorial-php.cn

How to play and pause CSS animation using CSS custom properties?

王林

Release： 2023-09-19 08:29:07

forward

1512 people have browsed it

如何使用 CSS 自定义属性播放和暂停 CSS 动画？

In SS, animation is an effective way to add visual effects to your website. However, sometimes we want more control over when and how these animations play. Here, we’ll explore how to use CSS custom properties to play and pause CSS animations.

Before we continue, we should know that CSS animations can be created using keyframes or by transitioning between two or more states.

grammar

@keyframes animation-name {
   /* define the animation steps */
}

Copy after login

We define animations by giving them names and using the @keyframes keyword. Inside the curly braces, we define the steps of the animation using percentages or keyword values.

Play and pause animation in CSS

In CSS, playing and pausing animations refers to the ability to control animated elements. This is a way to add movement and visual interest to your website.

Playing and pausing animations allows us to control when and how these animations play. This is useful if we want the user to be able to pause the animation when they need to focus.

In CSS, we can use the animation-play-state attribute to control whether the animation is running or paused. By default, the animation-play-state property is set to running, which means the animation will automatically play when the page loads. However, we can use CSS to change the value of this property to start or stop the animation at any time.

To create play and pause animation effects using CSS, you can follow these steps -

Step 1: Define animation

The first step is to define the animation we want to control. We can create a simple animation using keyframes.

Step 2: Create play and pause effects

After defining the animation, we need to create the element that controls the animation. We can use any HTML element such as buttons, checkboxes, and hover effects.

Step 3: Define CSS custom properties

Now, we need to define the CSS custom property that holds the animation state. We can use any name for the custom property, but in this example we will use --animation-play-state and --animation-timingfunction.

We will understand the above concepts through examples.

Example 1

Here is an example of how to create a simple slide animation.

<!DOCTYPE html>
<html>
<head>
   <style>
      body { text-align: center;}
      .box {
         display: flex;
         height: 80px;
         width: 80px;
         border-radius: 10%;
         color: white;
         background-color: green;
         position: relative;
         animation: my-animation 6s infinite;
      }
      .box:hover { animation-play-state: paused;}
      @keyframes my-animation {
         from {left: 0px;}
         to {left: 400px;}
      }
   </style>
</head>
   <body>
      <h2>A simple animation of a slide</h2>
      <div class="box">Mouse Hove to give me a break.</div>
   </body>
</html>

Copy after login

Example 2

This is another example of how to use CSS custom properties to play and pause CSS animations.

<!DOCTYPE html>
<html>
<head>
   <style>
      body { text-align: center; }
      .box {
         align-items: center;
         background-color: green;
         display: flex;
         height: 80px;
         width: 80px;
         margin-top: 10px;
         border-radius: 10%;
      }
      .my-slide {--animdur: 5s; --animn: slide; }
      [my-animation] {
         animation: var(--animn, none) var(--animdur, 0s) var(--animtf,
         linear) var(--animic, infinite) var(--animdir, alternate) var(--animps,
         running);
      }
      [my-animation-pause]:checked~[my-animation] {
         --animps: paused;
      }
      @keyframes slide {
         from { margin-left: 0%;}
         to {margin-left: calc(100% - 80px);}
      }
   </style>
</head>
   <body>
      <input type="checkbox" my-animation-pause id="move" class="#" />
      <label for="move" class="#">Check Me to play/paus</label>
      <div class="box my-slide" my-animation="stop"></div>
   </body>
</html>

Copy after login

in conclusion

Using CSS custom properties to play and pause CSS animations provides a simple and effective way to control animations on web pages. In the first example, we use keyframe animation to define the animation and the animation-play-state property to control its state. In the second example, we use a transition animation and change the value of a custom property to control the state of the animation. Both techniques provide a way to create dynamic animations that can be easily controlled using CSS.

The above is the detailed content of How to play and pause CSS animation using CSS custom properties?. For more information, please follow other related articles on the PHP Chinese website!