Junior — Senior

Creating animation using CSS variables

livecode

Task condition

Check the correct usage of CSS custom properties inside the @keyframes rule, and also ensure the proper functioning of media queries and the syntax of the transform property.

<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>

Previous Next