Grokking CSS Design Patterns to Ace Interviews/

...

/

Problem: Circular Page Reveal Transition

Problem: Circular Page Reveal Transition

Try to create a seamless circular page reveal animation using a shrinking clip-path mask with pure CSS.

We'll cover the following...

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