Finish infinite iterations cycle and stop the animation with CSS - css

Question

I have an animation that has an infinite iterations count:
.spinner {
animation: spinnerAnimation 2s linear infinite;
}
What I want is to make the animation finish the current animation cycle and stop it on a button click (not really on a button click, but this is to make things easier to understand):
$("button").click(function() {
$(".spinner").addClass("stop");
})
This will add a stop class to the spinner:
.spinner.stop {
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
It doesn't work really smooth, but I don't care about smoothness much in this case:
http://codepen.io/Deka87/pen/OXZvdm
The only problem is that this won't stop the animation in IE edge, i.e. things don't work in IE (versions that support animations). Any ideas?
PS: animation-play-state: pause; is not what I need, because this won't make the animation finish the current animation cycle, but pause it in its current position instead.
PSS: I am really looking for a CSS only solution, i.e. make it work inside .spinner.stop{}.

Answer 1

You had a problem with the name of your keyframe name - spinnerAnimation vs preloaderAnimation
The only way I was able to set IE to stop the animation was to set animation: none; inside the .stop class:
$("button").click(function() {
$(".spinner").addClass("stop");
})
.spinner {
width: 30px; height: 30px;
background: green;
animation: spinnerAnimation 2s linear infinite;
}
.spinner.stop {
-webkit-animation-iteration-count: 1;
animation: none;
}
button {
margin-top: 20px;
}
#-webkit-keyframes spinnerAnimation {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spinnerAnimation {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spinner"></div>
<button>Stop spinner</button>