tor-browser

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

animation-trigger-fill-mode-none.tentative.html (1010B)


      1 <!DOCTYPE html>
      2 <html>
      3  <head>
      4    <link rel="help" href="https://drafts.csswg.org/web-animations-2#animation-trigger">
      5    <link rel="match" href="animation-trigger-fill-mode-none-ref.html">
      6  </head>
      7  <body>
      8    <style>
      9      .scroller {
     10        overflow-y: scroll;
     11        border: solid 1px;
     12        place-self: center;
     13        height: 300px;
     14        width: 200px;
     15      }
     16      @keyframes slide-in {
     17        from {
     18          transform: translateX(-50px);
     19        }
     20      }
     21      .target {
     22        height: 100px;
     23        width: 100%;
     24        background-color: blue;
     25        animation: slide-in 3s none;
     26        timeline-trigger: --trigger view() contain 0% contain 100%;
     27        animation-trigger: --trigger play-forwards play-backwards;
     28      }
     29      .space {
     30        height: 250px;
     31        width: 50%;
     32      }
     33 
     34    </style>
     35    <div id="scroller" class="scroller">
     36      <div class="space"></div>
     37      <div id="target" class="target"></div>
     38      <div class="space"></div>
     39    </div>
     40  </body>
     41 </html>