tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

clip-text-animated-text.html (862B)

      1 <!doctype html>
      2 <html class="reftest-wait">
      3 <title>CSS Test: background-clip: text animated text</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#valdef-background-clip-text">
      5 <link rel="author" href="mailto:nathan@knowler.dev" title="Nathan Knowler">
      6 <link rel="match" href="clip-text-animated-text-ref.html">
      7 <style>
      8  .text {
      9    background-color: DeepPink;
     10    background-clip: text;
     11    font-size: 50px;
     12    font-family: sans-serif;
     13    font-weight: 600;
     14    color: transparent;
     15  }
     16 
     17  .text p {
     18    animation: fade-in 0.1s both;
     19  }
     20 
     21  @keyframes fade-in {
     22    from { opacity: 0; }
     23  }
     24 </style>
     25 <div class="text">
     26  <p>Text</p>
     27 </div>
     28 <script>
     29  const [animation] = document.querySelector(".text p").getAnimations();
     30  animation.finished.then(() => {
     31    document.documentElement.classList.remove("reftest-wait");
     32  });
     33 </script>