I've encountered an issue with an animation that is functioning correctly on all browsers except for IE11.
$(document).ready(function() {
$('.activate').click(function() {
$('.eight-box').toggleClass('animate')
});
}());.activate {
background: black;
color: red;
border: 2px solid red;
font-size: 16px;
position: absolute;
left: 10px;
text-align: center;
}
... (CSS code here)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="activate">Animate</button>
<div class="eight-box">
<div class="rotate1">
<div class="fig-8 col-1 pos-4">1</div>
</div>
<div class="rotate2">
<div class="fig-8 col-2 pos-4">2</div>
</div>
<div class="rotate3">
<div class="fig-8 col-3 pos-4">3</div>
</div>
<div class="rotate4">
<div class="fig-8 col-4 pos-4">4</div>
</div>
</div>Furthermore, I have implemented SCSS in this project, and you can view the code on CodePen: https://codepen.io/maketroli/pen/NgBZZL
While the animation performs flawlessly on Chrome and Firefox, IE11 displays some glitches that arise when toggling the class .animate for the second time. Any recommendations on how to address this issue?