Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Прерывистая анимация в Firefox (https://javascript.ru/forum/xhtml-html-css/78756-preryvistaya-animaciya-v-firefox.html)

mazahaler 31.10.2019 11:43

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

MOT 31.10.2019 20:14

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.