Есть сайт, создан скорее для тренировки. https://seregasmyfavoritesites.on.drv.tw/Site/Kvashenaya/ Рабочий на 99%. На нем есть 2 анимации. Два heading "КВАШЕНАЯ" и "САША". К ним приклеены 2 анимации, практически одинаковые.
<style>
:root {
--visota: 100vh;
--visota_menu: calc(20px + 7vw);
**--visota_real**: calc(var(--visota) - var(--visota_menu) );
--random }
</style>
<style>
@keyframes a_Down_Random {
from {transform-origin: center top}
75% {transform-origin: center bottom;
transform: perspective(500px)
translate3d(400px, var(--visota_real), 0px)
rotateX(calc(var(--random,1)*360deg))
rotateY(calc(var(--random,1)*360deg))
rotateZ(calc(var(--random,1)*180deg)) } }
@keyframes a_X0to60-Zminus60plus30 {
from {transform-origin: left top}
5% {transform: rotateX(-10deg)}
9% {transform: rotateX(15deg)}
13% {transform: rotateX(-40deg)}
17% {transform: rotateX(60deg)}
21% {transform: rotateX(-60deg)}
25% {transform: rotateX(40deg)}
29% {transform: rotateX(-30deg)}
33% {transform: rotateX(20deg)}
37% {transform: rotateX(-10deg)}
41% {transform: rotateX(5deg)}
45% {transform: rotateX(0deg)}
49% {transform: rotateZ(70deg)}
53% {transform: rotateZ(15deg)}
57% {transform: rotateZ(60deg)}
61% {transform: rotateZ(20deg)}
65% {transform: rotateZ(50deg)}
69% {transform: rotateZ(30deg)}
73% {transform: rotateZ(35deg)}
85% {transform: rotateX(85deg)
rotateZ(20deg)
translateY(var(--visota_real)) }
to {transform-origin: left top} }
</style>
Ответ: в точке 85% строку rotateX(85deg) перенести после translateY()
Слово "КВАШЕНАЯ" падает по анимации a_Down_Random {}, Слово "САША" падает по анимации a_X0to60-Zminus60plus30 {},
остальной код, наверное, лишний. Т.к. все отображается приблизительно правильно, анимация запускается.
Слово "КВАШЕНАЯ" падает верно. Слово "САША" падает ПОЧТИ верно . Оно болтается до своих 73% правильно. Но далее в строке 85% {transform: translateY(var(--visota_real)) что-то ломается. Эта "САША" движется вниз на неизвестную (может, половина высоты экрана ?) высоту (а должна на точно такую же высоту , как и слово "КВАШЕНАЯ") и возвращается вверх. Почему ?
Эти анимации одинаковые. Используют одну CSS-переменную var(--visota_real) -- она примерно показывает высоту экрана. По задумке эта "САША" должна опуститься на высоту translateY(var(--visota_real)) , и за 15% времени подняться в исходную позицию. Почему ее сносит вниз и сразу назад вверх ? Почему ее тянет в ноль экрана ? Я подозреваю, что это связано со transform-origin: . Где-то на этих 85% происходит то, что центр этой "САШИ" определяется не внутри нее, а наверху страницы, где она висит изначально. Не могу понять -- там же все одинаковое !
transform-origin