Run css animation back and forth on clicks

问题

With css @keyframes I'm trying to attach some animation to an element when it is clicked.

.animate {
    animation-name: action;
    animation-duration: 2s;
    animation-timing-function: linear;
    background-color: green;
} 

@keyframes action {
    0% {
        background-color: gray; 
    }  

   50% {
       background-color: red;
   }

   100% {
       background-color: green;
   }
}

DEMO

The .animate class is added on click, and the box animates from gray to green. But now I would like to animate back to gray when I click it again (toggle functionality). I tried using the same animation using animation-direction: reverse but no animation was played. The animation should not play initially (I encountered that a couple of times). Any suggestion how I can achieve that?

回答1:

Handling this kind of on/off changes with animations is always tricky, and it is very difficult to handle the repeated changes smoothly and seamlessly.

For your case, I would suggest to change it to a single transition. Browser handle much better the on/off part in this case. To achieve a double change in the background color with a transition, create a gradient with 3 colors, and change the gradient position:

const div = document.querySelector('.test')
div.addEventListener('click', (e) => {
   div.classList.toggle('play');
})

.test {
  border: solid 1px black;
  margin: 10px;
  height: 100px;
  width: 100px;
  background-image: linear-gradient(gray 0%, gray 20%, blue 40%, blue 60%,
   red 80%, red 100%);
  background-size: 100% 9000%;
  background-repeat: no-repeat;
  background-position: center top;
  transition: background-position .3s;
}

.play {
  background-position: center bottom;
}

<div class="test">
</div>

回答2:

I would consider using the animation-play-state property and also use infinite and alternate. The idea is to run the animation and stop it when it ends, then run it again and so on:

const div = document.querySelector('.target')
div.addEventListener('click', (e) => {
   div.classList.add('play');
   setTimeout(function() {
      div.classList.remove('play');
   },2000)
})

.target {
  width: 100px;
  height: 100px;
  background-color: gray;
  cursor: pointer;
  animation: action 2s linear alternate infinite;
  animation-play-state:paused;
}
.play {
  animation-play-state:running;
}

@keyframes action {
  0% {
    background-color: gray; 
  }  

  50% {
    background-color: red;
  }

  100% {
     background-color: green;
  }
}

<div class="target">

</div>

回答3:

Ok, here is my approach:

hold animation, until you once added .enabled (prevents animation on load)
toggle an .active class on every click
important: define a →different← animation in .active, even if your shake or wobble animation forth and back is identical, define it as a copy. (otherwise there will be no animation on the way back)

const div = document.querySelector('.target')
div.addEventListener('click', (e) => {
  div.classList.add('active');
  div.classList.toggle('play');
})

/* REF https://stackoverflow.com/a/49575979 */
body, html { /* eye candy */
  background: #444; display: flex; min-height: 100vh; align-items: center; justify-content: center;
}

div { /* eye candy */
  width: 200px; height: 100px; border: 12px dashed #888; border-radius: 20px; 
  background: red;
}

/* prevents that there is an animation already on loading */
.active {
  animation: trafficLight 2s linear;
}

.play {
  border: 12px solid white; /* white border == play */
  background: green;
  /* yes, already setting for the way back!
     fun fact: if you do not set a DIFFERENT animation, NO animation whatsoever will happen
    (so also for simple bounce animations, where forth=back would be o.k.
     you do need to clone it... varying time (1.001s) or direction is NOT enough.) */
  animation: trafficLightBack 2s linear;
}

@keyframes trafficLight {
  0% { background-color: green; }  
  50% { background-color: yellow; }  
  100% { background-color: red;}  
}

@keyframes trafficLightBack {
  0% { background-color: red; }  
  50% { background-color: yellow; }  
  100% { background-color: green;}  
}

<div class="target"></div>

来源：https://stackoverflow.com/questions/49575807/run-css-animation-back-and-forth-on-clicks

标签

css

css-animations

keyframe