В коде две опечатки: 100wh нужно заменить на 100vh, а ls — на 1s. После исправления элемент будет за секунду перемещаться снизу к исходной позиции.
Разбор работы представленного HTML‑CSS кода
В коде две опечатки: 100wh нужно заменить на 100vh, а ls — на 1s. После исправления элемент будет за секунду перемещаться снизу к исходной позиции.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
Объясните, как функционирует следующий фрагмент кода, описав роль каждой части и взаимодействие стилей:
<html>
<head>
<style>
:root {
--target-y: 100wh
}
@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 ls ease-in;
}
</style>
</head>
<body>
<div id="target"></div>
</body>
</html>
Ответ
В коде две опечатки: 100wh нужно заменить на 100vh, а ls — на 1s. После исправления элемент будет за секунду перемещаться снизу к исходной позиции.
:root задаёт CSS-переменную со смещением по вертикали. При высоте viewport до 500px медиазапрос заменяет её на 400px. Keyframes меняет translate3d от этого смещения до нуля, ease-in задаёт ускорение. В исходнике неизвестная единица wh делает подстановку в transform некорректной, а animation с ls не задаёт корректную длительность. Пустому div дополнительно нужны размеры и фон или содержимое, иначе движение не будет визуально заметно.