tor-browser

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

doc_multi_easings.html (2308B)

      1 <!DOCTYPE html>
      2 <html lang="en">
      3  <head>
      4    <meta charset="UTF-8">
      5    <style>
      6    div {
      7      background-color: lime;
      8      height: 50px;
      9    }
     10    </style>
     11  </head>
     12  <body>
     13    <script>
     14    "use strict";
     15 
     16    function createAnimation(name, keyframes, effectEasing) {
     17      const div = document.createElement("div");
     18      div.classList.add(name);
     19      document.body.appendChild(div);
     20 
     21      const effect = {
     22        duration: 100000,
     23        fill: "forwards",
     24      };
     25 
     26      if (effectEasing) {
     27        effect.easing = effectEasing;
     28      }
     29 
     30      div.animate(keyframes, effect);
     31    }
     32 
     33    createAnimation(
     34      "no-easing",
     35      [
     36        { opacity: 1 },
     37        { opacity: 0 },
     38      ]
     39    );
     40 
     41    createAnimation(
     42      "effect-easing",
     43      [
     44        { opacity: 1 },
     45        { opacity: 0 },
     46      ],
     47      "steps(5, jump-none)"
     48    );
     49 
     50    createAnimation(
     51      "keyframe-easing",
     52      [
     53        { opacity: 1, easing: "steps(2)" },
     54        { opacity: 0 },
     55      ]
     56    );
     57 
     58    createAnimation(
     59      "both-easing",
     60      [
     61        { offset: 0, opacity: 1, easing: "steps(2)" },
     62        { offset: 0, marginLeft: "0px", easing: "steps(1)" },
     63        { marginLeft: "100px", opacity: 0 },
     64      ],
     65      "steps(10)"
     66    );
     67 
     68    createAnimation(
     69      "narrow-keyframes",
     70      [
     71        { opacity: 0 },
     72        { offset: 0.1, opacity: 1, easing: "steps(1)" },
     73        { offset: 0.13, opacity: 0 },
     74      ]
     75    );
     76 
     77    createAnimation(
     78      "duplicate-keyframes",
     79      [
     80        { opacity: 0 },
     81        { offset: 0.5, opacity: 1 },
     82        { offset: 0.5, opacity: 0, easing: "steps(1)" },
     83        { opacity: 1 },
     84      ]
     85    );
     86 
     87    createAnimation(
     88      "color-keyframes",
     89      [
     90        { color: "red", easing: "ease-in" },
     91        { offset: 0.4, color: "blue", easing: "ease-out" },
     92        { color: "lime" },
     93      ]
     94    );
     95 
     96    createAnimation(
     97      "jump-start",
     98      [
     99        { opacity: 1, easing: "steps(2, jump-start)" },
    100        { opacity: 0 },
    101      ],
    102    );
    103 
    104    createAnimation(
    105      "jump-end",
    106      [
    107        { opacity: 1, easing: "steps(2, jump-end)" },
    108        { opacity: 0 },
    109      ],
    110    );
    111 
    112    createAnimation(
    113      "jump-both",
    114      [
    115        { opacity: 1, easing: "steps(3, jump-both)" },
    116        { opacity: 0 },
    117      ],
    118    );
    119    </script>
    120  </body>
    121 </html>