Прерывистая анимация в Firefox
 

Здравствуйте, проблема в том, что во всех браузерах анимация плавная, а в firefox "прерывистая".
Как такое можно исправить?
https://codepen.io/vladislav-harlanchuk/pen/poodErp

mazahaler,
в Chrome анимация тоже не отличается особой плавностью. Вот ваша моя анимация:

<style>
div {
width: 50px;
height: 100px;
background: black;
position: absolute;
}
div {
animation: pulsate 2.5s infinite linear;
animation-fill-mode: forwards;
}
@keyframes pulsate{
0%{
top: 0px;
}
50% {
top: 5px;
}
100% {
top: 0px;
}
}
</style>
<div></div>

Есть два решения как сделать её более плавной:
1)Сделать путь блока сверху→вниз→наверх в 2 раза больше:

<style>
div {
width: 50px;
height: 100px;
background: black;
position: absolute;
}
div {
animation: pulsate 2.5s infinite linear; 
animation-fill-mode: forwards;
}
@keyframes pulsate{
0%{
top: 0px;
}
50% {
top: 10px;
}
100% {
top: 0px;
}
}
</style>
<div></div>

2)либо сделать время прохождения блока в 2 раза меньше:

<style>
div {
width: 50px;
height: 100px;
background: black;
position: absolute;
}
div {
animation: pulsate 1.25s infinite linear; 
animation-fill-mode: forwards; 
}
@keyframes pulsate{
0%{
top: 0px;
}
50% {
top: 5px;
}
100% {
top: 0px;
}
}
</style>
<div></div>

Тогда прерывистость анимации уменьшается и становится менее явной