Despite working perfectly on Firefox, Chrome, and Edge, the animations on my website seem to have erratic timing on IE11.
To see the animation as intended:
However, on IE11, the animation behaves differently: I've attempted adjusting the animation-timing-function and adding a delay of 0, but nothing seems to resolve the issue.
The animation for scrolling in is defined as follows:
.step__hidden{
top: -100vh;
}
.step__active{
animation: scrollIn 1s ease-in-out 0s;
top: 0;
}
@keyframes scrollIn{
0%{
transform: translateY(-100vh);
}
100%{
transform: translateY(0);
}
}
Furthermore, is there a method to inspect animations using the IE/Edge developer tools similar to other browsers?