I am currently facing an issue with a CSS animation on my website that animates an arrow back and forth. The animation is working perfectly on all browsers except for Internet Explorer, where there seems to be a glitch causing the Y position of the arrow to change unexpectedly.
$(function() {
$('button').click(function(e) {
e.preventDefault();
$('img.next').addClass('animated');
});
});.arrow-cont {
height:100%;
width:130px;
position:absolute;
right:0;
top:0;
cursor:pointer;
overflow:hidden;
}
img.next {
width:30px;
position:absolute;
top:50%;
right:20px;
animation-duration:1.5s;
animation-timing-function:ease-in-out;
transition:0.5s all ease-in-out;
}
img.next.animated {
animation-name:next;
animation-iteration-count:infinite;
}
@keyframes next {
from { transform:translate(0px, -50%); }
65% { transform:translate(10px, -50%); }
to { transform:translate(0px, -50%); }
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="arrow-cont">
<img class="next" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Arrow_Blue_Right_001.svg/768px-Arrow_Blue_Right_001.svg.png" />
</div>
<button>Animate</button>