Показать сообщение отдельно
  #2 (permalink)  
Старый 31.10.2019, 20:14
MOT MOT вне форума
Интересующийся
Отправить личное сообщение для MOT Посмотреть профиль Найти все сообщения от MOT
 
Регистрация: 30.08.2019
Сообщений: 19

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>

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