первые ссылки в google дают такие цифры (ниже): --bounce-easing: linear( ... )
Скорее всего, все анимации собраны здесь: https://fullystacked.net/posts/linear/
причем, как будто других не существует. Только эти 4 прыжка. Именно эти цифры временной функции показаны здесь
https://yadi.sk/d/UZ_AkLkitSY2HA (SVG)
% -- время, числа -- прогресс по Y. Сама анимация работает, похожа на правильную параболу. Но меня убивает принцип ее разделения по 4 точкам, которые выбраны, очевидно, случайным образом.
Для меня загадка, откуда выбраны эти временные точки. Есть 4 прыжка, разделите на 4 параболы и нет претензий
Вот появилось у меня желание увеличить число прыжков. А не получится. Здесь точки действительно рассчитаны по параболе. И любое смещение, особенно по времени, вызывает сильные отличия от реального поведения: появляются либо дергания, либо торможения.
Было бы лучше, если контрольные точки четко соответствовали прогрессу 1.
Меня интересуют контрольные точки, привязанные к 1, которые можно вставить в CSS.
Даже по картинкам в Google можно найти цифры с таймингами, чуть ли не от руки нарисованы, именно на отскоках (на 1). Можно через Excel рассчитать саму параболу.
Метод топорный , но ... В принципе , этого почти достаточно. Но спад активности будет линейный. Кто в курсе, по какой кривой здесь Максимумы ? :)
Вопрос: как заставить кота прыгать повыше и подальше ? :)
body {overflow: hidden }
:root {
--toll: 160px;
--bounce-easing: linear(
0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%,
0.25, 0.391, 0.563, 0.765, 1, 0.891 40.9%,
0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813, 0.848, 0.891 68.2%,
1 72.7%,
0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1, 0.988, 0.984, 0.988 100% )
}
.element { animation: bounce 5s var(--bounce-easing) infinite }
@keyframes bounce {
to { transform: translateY(calc(100vh - var(--toll))) } }
#Shape {
position: absolute;
left: 0px;
top: 0px;
width: 150px;
height: 160px; }
<body>
<script src="https://seregasmyfavoritesites.on.drv.tw/Site/CSS-JS/jquery-3.7.0.min.js"></script>
<script src="https://seregasmyfavoritesites.on.drv.tw/Site/CSS-JS/18.3.min.js"></script>
<div id="Shape" onmouseenter="Animate('Shape', '400', '', '', '', '', 3000, '')" onmouseleave="Animate('Shape', '0', '', '', '', '', 3000, '')">
<img class="element" src="https://seregasmyfavoritesites.on.drv.tw/Site/Tihomir/images/04046239-1920-150x160.jpg">
</div>
</body>
Благодарности: @Grundy