var(--target-y) допустим внутри keyframes, translate3d записан корректно. При высоте окна до 500px включительно начальное смещение равно 400px, иначе 100vh.
Создание анимации с помощью CSS‑переменных
var(--target-y) допустим внутри keyframes, translate3d записан корректно. При высоте окна до 500px включительно начальное смещение равно 400px, иначе 100vh.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
Проверьте правильность использования CSS‑custom properties внутри правила @keyframes, а также убедитесь в корректной работе медиазапросов и синтаксиса свойства transform.
<html>
<head>
<style>
:root {
--target-y: 100vh;
}
@media (max-height: 500px) {
:root {
--target-y: 400px;
}
}
@keyframes fromTarget {
0% {
transform: translate3d(0, var(--target-y), 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
#target {
animation: fromTarget 1s ease-in;
}
</style>
</head>
<body>
<div id="target"></div>
</body>
</html>
Ответ
var(--target-y) допустим внутри keyframes, translate3d записан корректно. При высоте окна до 500px включительно начальное смещение равно 400px, иначе 100vh.
Пустой div без высоты и фона почти нечего отображает, поэтому корректная анимация может выглядеть неработающей. Добавьте видимые размеры; медиазапрос проверяет высоту viewport, а не элемента.
#target {
width: 40px;
height: 40px;
background: royalblue;
animation: fromTarget 1s ease-in;
}
@media (prefers-reduced-motion: reduce) {
#target { animation: none; }
}
Движение идёт снизу к исходному положению. transform не меняет место элемента в потоке; 400px при маленьком окне может начинаться за его границей.