javascript - CSS Animations, start and stop infinite animation on click - Stack Overflow

admin管理员组

文章数量:1305731

Is there any way to do that without javascript or do I have to use JS to append/remove class from an object? Could you guys show me some live example? Right now I have something that works only on hover of the object:

  .clicker:hover + .circle {
    -webkit-animation: rotor 1.5s linear 0s infinite normal;
    -mox-animation: rotor 1.5s linear 0s infinite normal;
    -o-animation: rotor 1.5s linear 0s infinite normal;
    animation: rotor 1.5s linear 0s infinite normal;
  }

  .paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

Is there any way to do that without javascript or do I have to use JS to append/remove class from an object? Could you guys show me some live example? Right now I have something that works only on hover of the object:

  .clicker:hover + .circle {
    -webkit-animation: rotor 1.5s linear 0s infinite normal;
    -mox-animation: rotor 1.5s linear 0s infinite normal;
    -o-animation: rotor 1.5s linear 0s infinite normal;
    animation: rotor 1.5s linear 0s infinite normal;
  }

  .paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

• javascript
• html
• css
• css-animations

Share Improve this question Follow asked Sep 27, 2017 at 7:34 user8626881user8626881 5

• There is no click Action in CSS – Matthias Seifert Commented Sep 27, 2017 at 7:36
• you have to use javascript or jquery.. – Shadow Fiend Commented Sep 27, 2017 at 7:37
• so could you show me how? – user8626881 Commented Sep 27, 2017 at 7:37
• [ codepen.io/CWiech05/pen/… ] take a look at this sample, do you mean something like that? – Reza P. Commented Sep 27, 2017 at 7:41
• on your click, it Stops and Starts the animation again – Reza P. Commented Sep 27, 2017 at 7:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Assuming this (from your CSS)...

<div class="clicker">[Your Content]</div>
<div class="circle">[Your Content]</div>

WITH PURE JAVASCRIPT:

<div class="clicker" onclick="this.nextElementSibling.classList.toggle('paused');">[Your Content]</div>
<div class="circle">[Your Content]</div>

WITH JQUERY:

$('.clicker').click(function(){
    $(this).next('.circle').toggleClass('paused');
});

You haven't post your html, so the JavaScript/jQuery selectors I'm using are base on your CSS. For a more specific answer with the best selectors, you should show your html.

EDIT:

I've just realized that with this solution you could have a problem with your CSS, because .circle styles prevails over .paused, so the class is been toggled but the styles aren't changing. You can easily solve it adjusting your CSS...

.clicker + .circle {
    -webkit-animation: rotor 1.5s linear 0s infinite normal;
    -mox-animation: rotor 1.5s linear 0s infinite normal;
    -o-animation: rotor 1.5s linear 0s infinite normal;
    animation: rotor 1.5s linear 0s infinite normal;
}

.paused {
    -webkit-animation-play-state: paused !important;
    -moz-animation-play-state: paused !important;
    -o-animation-play-state: paused !important; 
    animation-play-state: paused !important;
}

I hope it helps

This is not possible in CSS, however if you are interested in a JavaScript example:

$(element).on('click', function () {

    if ($(target).hasClass('paused'))
    {
        $(target).removeClass('paused');
    }

    else 
    {
        $(target).addClass('paused');
    }

});

Replace element with the button or anchor that activates the class removal / addition. And replace target with the element that should animate.

This solution requires jQuery.

var active = document.querySelector('.active');
var div = document.querySelector('.wrap');
var hasAnimationPaused = false;
var aniamtionPausedClass = 'paused'

div.className += ' circle';
active.addEventListener('click', function(e) {
  var classNames = div.className.split(' ');
  if (!hasAnimationPaused) {
    div.className += ' ' + aniamtionPausedClass;
    hasAnimationPaused = true;
  } else {
    classNames.splice(classNames.indexOf(aniamtionPausedClass), 1);

    div.className = classNames.join(' ');
    hasAnimationPaused = false;
  }
})

.wrap {
  color: black;
}
@keyframes rotor {
from {
  color: red;
}
50% {
  color: yellow;
}
to {
  color: blue;
}
}
.circle {
    -webkit-animation: rotor 1.5s linear 0s infinite normal;
    -mox-animation: rotor 1.5s linear 0s infinite normal;
    -o-animation: rotor 1.5s linear 0s infinite normal;
    animation: rotor 1.5s linear 0s infinite normal;
  }
  .paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

<div class="wrap"> TEst Test</div>
<button class="active">CLick</button>

本文标签： javascriptCSS Animationsstart and stop infinite animation on clickStack Overflow