Sobes.tech
Назад к задачам
Junior — Senior
5

Создание анимации с помощью CSS‑переменных

Компании, где спрашивали:

Учи.руУчи.ру
Получайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Условие задачи

Проверьте правильность использования 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>