I am facing an issue with a looping animation that rotates a square. Whenever I remove the class responsible for the animation, the square immediately returns to its initial position.
My objective is to animate the square back to the starting position upon triggering a JS event.
If you want to take a look at the code, here is the codepen link.
I attempted adding a transform property to the element and also changing to another keyframe animation, but unfortunately, neither approach yielded the desired result.
Below are the snippets of HTML, CSS, and jQuery code:
<div class="container">
<div class="animate rotating"></div>
</div>
.container{
position: absolute;
width: 100%;
height: 100%;
background-color: #333;
}
.animate{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
transform: all 2s ease;
}
@keyframes rotating {
0%{transform: rotate(30deg);}
50%{transform: rotate(-30deg);}
100%{transform: rotate(30deg);}
}
.rotating {
animation: rotating 6s ease-in-out infinite forwards;
animation-delay: -2s;
}
$('.animate').click(function(){
$(this).removeClass('rotating');
});