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>
Тогда прерывистость анимации уменьшается и становится менее явной