tor-browser

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

doc_simple_animation.html (3952B)

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4  <meta charset="UTF-8">
      5  <style>
      6    @property --ball-color {
      7      syntax: "<color>";
      8      inherits: true;
      9      initial-value: #f06;
     10    }
     11 
     12    .ball {
     13      width: 80px;
     14      height: 80px;
     15      /* Add a border here to avoid layout warnings in Linux debug builds: Bug 1329784 */
     16      border: 1px solid transparent;
     17      border-radius: 50%;
     18      background: var(--ball-color);
     19      position: absolute;
     20    }
     21 
     22    .still {
     23      top: 0;
     24      left: 10px;
     25    }
     26 
     27    .animated {
     28      top: 100px;
     29      left: 10px;
     30 
     31      animation: simple-animation 2s infinite alternate;
     32    }
     33 
     34    .multi {
     35      top: 200px;
     36      left: 10px;
     37 
     38      animation: simple-animation 2s infinite alternate,
     39                 other-animation 5s infinite alternate;
     40    }
     41 
     42    .delayed {
     43      top: 300px;
     44      left: 10px;
     45      background: rebeccapurple;
     46 
     47      animation: simple-animation 3s 60s 10;
     48    }
     49 
     50    .multi-finite {
     51      top: 400px;
     52      left: 10px;
     53      background: yellow;
     54 
     55      animation: simple-animation 3s,
     56                 other-animation 4s;
     57    }
     58 
     59    .short {
     60      top: 500px;
     61      left: 10px;
     62      background: red;
     63 
     64      animation: simple-animation 2s normal;
     65    }
     66 
     67    .long {
     68      top: 600px;
     69      left: 10px;
     70      background: blue;
     71 
     72      animation: simple-animation 120s;
     73    }
     74 
     75    .negative-delay {
     76      top: 700px;
     77      left: 10px;
     78      background: gray;
     79 
     80      animation: simple-animation 15s -10s;
     81      animation-fill-mode: forwards;
     82    }
     83 
     84    .no-compositor {
     85      top: 0;
     86      right: 10px;
     87      background: gold;
     88 
     89      animation: no-compositor 10s cubic-bezier(.57,-0.02,1,.31) forwards;
     90    }
     91 
     92    .compositor-all {
     93      animation: compositor-all 2s infinite;
     94    }
     95 
     96    .compositor-notall {
     97      animation: compositor-notall 2s infinite;
     98    }
     99 
    100    .compositor-warning {
    101      animation: compositor-all 2s infinite;
    102    }
    103 
    104    .warning-observer {
    105      width: 10px;
    106      height: 10px;
    107      background-image: -moz-element(#warning);
    108    }
    109 
    110    .longhand {
    111      animation: longhand 10s infinite;
    112    }
    113 
    114    @keyframes simple-animation {
    115      100% {
    116        transform: translateX(300px);
    117      }
    118    }
    119 
    120    @keyframes other-animation {
    121      100% {
    122        background: blue;
    123      }
    124    }
    125 
    126    @keyframes no-compositor {
    127      100% {
    128        margin-right: 600px;
    129      }
    130    }
    131 
    132    @keyframes compositor-all {
    133      to { opacity: 0.5 }
    134    }
    135 
    136    @keyframes compositor-notall {
    137      from {
    138        --ball-color: tomato;
    139        opacity: 0;
    140        width: 0px;
    141        transform: translate(0px);
    142      }
    143      to {
    144        --ball-color: gold;
    145        opacity: 1;
    146        width: 100px;
    147        transform: translate(100px);
    148      }
    149    }
    150 
    151    @keyframes longhand {
    152      from {
    153        background: red;
    154        padding: 0 0 0 10px;
    155      }
    156      to {
    157        background: lime;
    158        padding: 0 0 0 20px;
    159      }
    160    }
    161  </style>
    162 </head>
    163 <body>
    164  <!-- Comment node -->
    165  <div class="ball still"></div>
    166  <div class="ball animated"></div>
    167  <div class="ball multi"></div>
    168  <div class="ball delayed"></div>
    169  <div class="ball multi-finite"></div>
    170  <div class="ball short"></div>
    171  <div class="ball long"></div>
    172  <div class="ball negative-delay"></div>
    173  <div class="ball no-compositor"></div>
    174  <div class="ball end-delay"></div>
    175  <div class="ball compositor-all"></div>
    176  <div class="ball compositor-notall"></div>
    177  <div class="ball compositor-warning" id="warning"></div>
    178  <div class="ball longhand"></div>
    179  <div class="warning-observer"></div>
    180  <script>
    181    /* globals KeyframeEffect, Animation */
    182    "use strict";
    183 
    184    const el = document.querySelector(".end-delay");
    185    const effect = new KeyframeEffect(el, [
    186      { opacity: 0, offset: 0 },
    187      { opacity: 1, offset: 1 },
    188    ], { duration: 1000000, endDelay: 500000, fill: "none" });
    189    const animation = new Animation(effect, document.timeline);
    190    animation.play();
    191  </script>
    192 </body>
    193 </html>