keyframed_animations.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    @keyframes animation1 {
      0% { transform: translateX(0px); }
      50% { transform: translateX(100px); }
      100% { transform: translateX(0px); }
    }

    @keyframes animation2 {
      0% { transform: rotate(0deg); }
      50% { transform: rotate(180deg); }
      100% { transform: rotate(0deg); }
    }

    @keyframes animation3 {
      0% { transform: scale(1); }
      50% { transform: scale(3); }
      100% { transform: scale(1); }
    }

    @keyframes animation4 {
      0% { transform: matrix(1, 0, 0, 1, 0, 0); }
      50% { transform: matrix(-1, 0, 0, -1, 0, 0); }
      100% { transform: matrix(1, 0, 0, 1, 0, 0); }
    }

    @keyframes animation5 {
      0% { transform: translateX(0px) scale(8); opacity(1); }
      50% { transform: translateX(100px) scale(0); opacity(0); }
      100% { transform: translateX(0px) scale(8); opacity(1); }
    }

    @keyframes animation6 {
      0% { transform: rotate(0deg); opacity(1); }
      50% { transform: rotate(180deg); opacity(0); }
      100% { transform: rotate(0deg); opacity(1); }
    }

    @keyframes animation7 {
      0% { transform: scale(1); opacity(1); }
      50% { transform: scale(13); opacity(0); }
      100% { transform: scale(1); opacity(1); }
    }

    @keyframes animation8 {
      0% { transform: matrix(1, 0, 0, 1, 0, 0); opacity(1); }
      50% { transform: matrix(-.5, .5, -.5, -1.2, -150, 100); opacity(0); }
      100% { transform: matrix(1, 0, 0, 1, 0, 0); opacity(1); }
    }

    @keyframes animation9 {
      0% { transform: translateX(0px) rotate3d(0, 1, 0, 0deg); }
      50% { transform: translateX(100px) rotate3d(0, 1, 0, 45deg); }
      100% { transform: translateX(0px) rotate3d(0, 1, 0, 0deg); }
    }

    @keyframes animation10 {
      0% { transform: rotate(0deg) rotate3d(0, 1, 0, 0deg); }
      50% { transform: rotate(180deg) rotate3d(0, 1, 0, 45deg); }
      100% { transform: rotate(0deg) rotate3d(0, 1, 0, 0deg); }
    }

    @keyframes animation11 {
      0% { transform: scale(1) rotate3d(0, 1, 0, 0deg); }
      50% { transform: scale(3) rotate3d(0, 1, 0, 45deg); }
      100% { transform: scale(1) rotate3d(0, 1, 0, 0deg); }
    }

    @keyframes animation12 {
      0% { transform: matrix(1, 0, 0, 1, 0, 0) rotate3d(0, 1, 0, 0deg); }
      50% { transform: matrix(-1, .5, .2, -1, 100, 100) rotate3d(0, 1, 0, 45deg); }
      100% { transform: matrix(1, 0, 0, 1, 0, 0) rotate3d(0, 1, 0, 0deg); }
    }

    @keyframes animation13 {
      0% { transform: translateX(0px) rotate3d(1, 1, 1, 0deg) scale(1); opacity(1); }
      50% { transform: translateX(100px) rotate3d(1, 1, 1, 45deg) scale(-10); opacity(0); }
      100% { transform: translateX(0px) rotate3d(1, 1, 1, 0deg) scale(1); opacity(1); }
    }

    @keyframes animation14 {
      0% { transform: rotate(0deg) rotate3d(1, 1, 1, 0deg) translateZ(0px); opacity(1); }
      50% { transform: rotate(180deg) rotate3d(1, 1, 1, 45deg) translateZ(500px); opacity(0); }
      100% { transform: rotate(0deg) rotate3d(1, 1, 1, 0deg) translateZ(0px); opacity(1); }
    }

    @keyframes animation15 {
      0% { transform: scale(1) rotate3d(1, 1, 1, 0deg); opacity(1); }
      50% { transform: scale(3) rotate3d(1, 1, 1, 45deg); opacity(0); }
      100% { transform: scale(1) rotate3d(1, 1, 1, 0deg); opacity(1); }
    }

    @keyframes animation16 {
      0% { transform: matrix(10, 0, 0, 10, 0, 0) rotate3d(1, 1, 1, 0deg); opacity(1); }
      50% { transform: matrix(-1, 0, 0, 0, 0, 0) rotate3d(1, 1, 1, 45deg); opacity(0); }
      100% { transform: matrix(10, 0, 0, 10, 0, 0) rotate3d(1, 1, 1, 0deg); opacity(1); }
    }

    div {
      position: absolute;
      transform-style: preserve-3d;
    }

    .poster {
      height: 50px;
      width: 50px;
      background-color: gray;
      border-radius: 10px;
      font-family: 'Georgia', serif;
      border: 2px solid black;
      font-size: 42px;
      font-weight: bold;
      text-align: center;
    }
  </style>
  <script type="text/javascript">
    function startExperiment()
    {
      for (var i = 0; i < 16; ++i) {
        var elem = document.getElementById("elem" + i.toString());
        elem.style.left = (i % 4 * 25 + 5).toString() + "%";
        elem.style.top = (Math.floor(i / 4) * 25 + 5).toString() + "%";
        elem.style.animationName = "animation" + (i + 1).toString();
        elem.style.animationDuration = "2s";
        elem.style.animationIterationCount = "infinite";
      }
    }

    window.addEventListener('load', startExperiment, false);
  </script>
</head>
<body>
<div id="elem0"><p class="poster">?</p></div>
<div id="elem1"><p class="poster">?</p></div>
<div id="elem2"><p class="poster">?</p></div>
<div id="elem3"><p class="poster">?</p></div>
<div id="elem4"><p class="poster">?</p></div>
<div id="elem5"><p class="poster">?</p></div>
<div id="elem6"><p class="poster">?</p></div>
<div id="elem7"><p class="poster">?</p></div>
<div id="elem8"><p class="poster">?</p></div>
<div id="elem9"><p class="poster">?</p></div>
<div id="elem10"><p class="poster">?</p></div>
<div id="elem11"><p class="poster">?</p></div>
<div id="elem12"><p class="poster">?</p></div>
<div id="elem13"><p class="poster">?</p></div>
<div id="elem14"><p class="poster">?</p></div>
<div id="elem15"><p class="poster">?</p></div>
</body>
</html>
chromium/tools/perf/page_sets/tough_animation_cases/keyframed_animations.html
