0

Ok folks, I really need some help here, it's blowing my mind...

Please take a look at the following example:

https://jsfiddle.net/t0Lahyjy/

HTML:

<div id="exmpl"></div>
<button id="btn">Try it</button>

CSS:

#exmpl {
  margin: 100px auto 0 auto;
  height: 100px;
  width: 10px;
  background: #000;
  -webkit-animation: anim 3s infinite linear;
  animation: anim 3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

@-webkit-keyframes anim {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes anim {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#btn {
  margin: 100px auto 0 auto;
  display:block;
}
.animationIsOff {

}

JS:

document.getElementById("btn").addEventListener("click", function(){
    document.getElementById("btn").className += " animationIsOff";
});

Now look, what I want is... to get the smooth animation from the rotation state of default to the transform: rotate(90deg); when #btn clicked. I wanna do it with adding a new class, say animationIsOff, but there's no smoothness between this two states. IF there's no way to accomplish this smoothness with CSS(by only adding a class with JS), perhaps there's a way to do it with help of JS?

I hope I'm pretty clear to you, otherwise please do ask... I will describe it as I can further.

foxxer
  • 1
  • 1
    Possible duplicate of [Smoothly stop CSS keyframe animation](http://stackoverflow.com/questions/29668238/smoothly-stop-css-keyframe-animation) – Tyler Roper Mar 29 '17 at 19:17
  • 1
    @Santi omfg... SANTI! you're the man! I rly hope this may help – foxxer Mar 29 '17 at 19:37
  • like this? https://jsfiddle.net/t0Lahyjy/1/ – Michael Coker Mar 29 '17 at 19:40
  • Yeah, that's pretty damn close, @MichaelCoker! :) But the animation stops only when u leave mouse pointer off from the `#btn`, can't say why exactly it is so, but this is how it acts at chrome. – foxxer Mar 29 '17 at 19:57
  • You can do something like this [jsfiddle](https://jsfiddle.net/rickyruizm/bbu3uyjk/). – Ricky Ruiz Mar 29 '17 at 20:05
  • @foxxer sorry, don't understand. The animation stops after you click the button and the current iteration of the animation ends. I'm also not understanding your end goal, so I'm just taking a guess (which is why I didn't answer your question). The classname `. animationIsOff ` you're trying to add in your code doesn't have any styles associated with it, so not sure what you expected that to do. – Michael Coker Mar 29 '17 at 20:16
  • Just guessing but do you want the animation to stop on button click? A hack~ish way to make it appear to stop would be to use a very long transition on the element, making it move back to it's original position really slowly. `transition: transform 3000000s linear;` – Davey Mar 29 '17 at 20:29
  • @MichaelCoker The animation with your example stops properly(at transform of 360 degrees) when you CLICK the button AND leave the "hover" of the button - the pointer of the mouse leaves the button. The empty `animationIsOff` is there just for an example... I simply don't know what to do with it, because all I try stops the animation without smoothness. – foxxer Mar 29 '17 at 20:34
  • @Davey No, that's absolute not a good solution :) but thanks, of course – foxxer Mar 29 '17 at 20:35
  • @Ricky Thanks. That's interesting approach – foxxer Mar 29 '17 at 20:42
  • @foxxer my code does nothing on hover. There is no CSS or JS that does anything on hover. It's all based on a `click` event to the button, so that when you click on the button, the JS tells `#exmpl` to add the class `.animationIsOff` when the current iteration of the animation ends, and `.animationIsOff` pauses the animation with `animation-play-state: paused;`. So the animation stops/pauses at the end of the iteration after you click the button. Hovering the button does nothing. – Michael Coker Mar 29 '17 at 20:58

0 Answers0