Problem description

Given an HTML page containing two div elements: a <div class="page-mask"></div> and a <div class="page-content">, write CSS to:

• Position .page-mask absolutely to cover the entire viewport above .page-content.

• Set its initial clip-path to circle(150% at 50% 50%) so it fully obscures the page.

• Define a @keyframes reveal animation that transitions clip-path from circle(150% at 50% 50%) to circle(0% at 50% 50%).

• Apply the reveal animation to .page-mask with a duration of 1s, timing function ease-out, a short delay (e.g., 0.3s), and forwards fill mode.

Goal

Write CSS rules to produce a circular mask that shrinks from full-screen to a point in the center, revealing the page content beneath in a smooth animation.

Constraints

• Use only CSS (no JavaScript).

• .page-mask should be as follows:

  • position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;

  • background-color: #111;

  • Initial clip-path: circle(150% at 50% 50%);

• Animation name should be reveal.

• Animation duration should be 1s.

• Animation timing function should be ease-out.

• Animation delay should be 0.3s.

• Animation iteration count should be 1.

• Animation fill mode should be forwards.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.