tor-browser

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

animation-data.html (2074B)

      1 <html>
      2 <head>
      3  <meta charset="UTF-8">
      4  <title>Animation Test Data</title>
      5  <style>
      6    .ball {
      7      width: 80px;
      8      height: 80px;
      9      border-radius: 50%;
     10      background: #f06;
     11 
     12      position: absolute;
     13    }
     14 
     15    .still {
     16      top: 0;
     17      left: 10px;
     18    }
     19 
     20    .animated {
     21      top: 100px;
     22      left: 10px;
     23 
     24      animation: simple-animation 2s infinite alternate;
     25    }
     26 
     27    .multi {
     28      top: 200px;
     29      left: 10px;
     30 
     31      animation: simple-animation 2s infinite alternate,
     32                 other-animation 5s infinite alternate;
     33    }
     34 
     35    .delayed {
     36      top: 300px;
     37      left: 10px;
     38      background: rebeccapurple;
     39 
     40      animation: simple-animation 3s 60s 10;
     41    }
     42 
     43    .multi-finite {
     44      top: 400px;
     45      left: 10px;
     46      background: yellow;
     47 
     48      animation: simple-animation 3s,
     49                 other-animation 4s;
     50    }
     51 
     52    .short {
     53      top: 500px;
     54      left: 10px;
     55      background: red;
     56 
     57      animation: simple-animation 2s;
     58    }
     59 
     60    .long {
     61      top: 600px;
     62      left: 10px;
     63      background: blue;
     64 
     65      animation: simple-animation 120s;
     66    }
     67 
     68    .negative-delay {
     69      top: 700px;
     70      left: 10px;
     71      background: gray;
     72 
     73      animation: simple-animation 15s -10s;
     74      animation-fill-mode: forwards;
     75    }
     76 
     77    .no-compositor {
     78      top: 0;
     79      right: 10px;
     80      background: gold;
     81 
     82      animation: no-compositor 10s cubic-bezier(.57,-0.02,1,.31) forwards;
     83    }
     84 
     85    @keyframes simple-animation {
     86      100% {
     87        transform: translateX(300px);
     88      }
     89    }
     90 
     91    @keyframes other-animation {
     92      100% {
     93        background: blue;
     94      }
     95    }
     96 
     97    @keyframes no-compositor {
     98      100% {
     99        margin-right: 600px;
    100      }
    101    }
    102  </style>
    103 </head>
    104 </body>
    105  <div class="ball still"></div>
    106  <div class="ball animated"></div>
    107  <div class="ball multi"></div>
    108  <div class="ball delayed"></div>
    109  <div class="ball multi-finite"></div>
    110  <div class="ball short"></div>
    111  <div class="ball long"></div>
    112  <div class="ball negative-delay"></div>
    113  <div class="ball no-compositor"></div>
    114 </body>
    115 </html>