Прерывистая анимация в 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> Тогда прерывистость анимации уменьшается и становится менее явной |
Часовой пояс GMT +3, время: 16:06. |