Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.10.2019, 11:43
Аспирант
Отправить личное сообщение для mazahaler Посмотреть профиль Найти все сообщения от mazahaler
 
Регистрация: 20.11.2017
Сообщений: 72

Прерывистая анимация в Firefox
Здравствуйте, проблема в том, что во всех браузерах анимация плавная, а в firefox "прерывистая".
Как такое можно исправить?
https://codepen.io/vladislav-harlanchuk/pen/poodErp
Ответить с цитированием
  #2 (permalink)  
Старый 31.10.2019, 20:14
MOT MOT вне форума
Аспирант
Отправить личное сообщение для MOT Посмотреть профиль Найти все сообщения от MOT
 
Регистрация: 30.08.2019
Сообщений: 52

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>

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как реализована анимация на сайте популярной игры? whoIam Общие вопросы Javascript 6 19.09.2016 09:45
не срабатывает scrollLeft анимация в firefox krokodily jQuery 2 25.08.2016 14:19
jQuery UI - при наведенной мыши не прекращается анимация (FireFox, IE) smegol jQuery 2 28.05.2015 19:35
JS Drag&Drop для созданного div в FireFox фонарик Общие вопросы Javascript 2 28.02.2013 21:34
Не работает jQuery анимация в Firefox makingpretty Events/DOM/Window 1 22.06.2011 00:05