tools/perf/page_sets/tough_animation_cases/keyframed_animations.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css">
   5     @-webkit-keyframes animation1 {
   6       0% { -webkit-transform: translateX(0px); }
   7       50% { -webkit-transform: translateX(100px); }
   8       100% { -webkit-transform: translateX(0px); }
   9     }
  10
  11     @-webkit-keyframes animation2 {
  12       0% { -webkit-transform: rotate(0deg); }
  13       50% { -webkit-transform: rotate(180deg); }
  14       100% { -webkit-transform: rotate(0deg); }
  15     }
  16
  17     @-webkit-keyframes animation3 {
  18       0% { -webkit-transform: scale(1); }
  19       50% { -webkit-transform: scale(3); }
  20       100% { -webkit-transform: scale(1); }
  21     }
  22
  23     @-webkit-keyframes animation4 {
  24       0% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); }
  25       50% { -webkit-transform: matrix(-1, 0, 0, -1, 0, 0); }
  26       100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); }
  27     }
  28
  29     @-webkit-keyframes animation5 {
  30       0% { -webkit-transform: translateX(0px) scale(8); opacity(1); }
  31       50% { -webkit-transform: translateX(100px) scale(0); opacity(0); }
  32       100% { -webkit-transform: translateX(0px) scale(8); opacity(1); }
  33     }
  34
  35     @-webkit-keyframes animation6 {
  36       0% { -webkit-transform: rotate(0deg); opacity(1); }
  37       50% { -webkit-transform: rotate(180deg); opacity(0); }
  38       100% { -webkit-transform: rotate(0deg); opacity(1); }
  39     }
  40
  41     @-webkit-keyframes animation7 {
  42       0% { -webkit-transform: scale(1); opacity(1); }
  43       50% { -webkit-transform: scale(13); opacity(0); }
  44       100% { -webkit-transform: scale(1); opacity(1); }
  45     }
  46
  47     @-webkit-keyframes animation8 {
  48       0% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity(1); }
  49       50% { -webkit-transform: matrix(-.5, .5, -.5, -1.2, -150, 100); opacity(0); }
  50       100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity(1); }
  51     }
  52
  53     @-webkit-keyframes animation9 {
  54       0% { -webkit-transform: translateX(0px) rotate3d(0, 1, 0, 0deg); }
  55       50% { -webkit-transform: translateX(100px) rotate3d(0, 1, 0, 45deg); }
  56       100% { -webkit-transform: translateX(0px) rotate3d(0, 1, 0, 0deg); }
  57     }
  58
  59     @-webkit-keyframes animation10 {
  60       0% { -webkit-transform: rotate(0deg) rotate3d(0, 1, 0, 0deg); }
  61       50% { -webkit-transform: rotate(180deg) rotate3d(0, 1, 0, 45deg); }
  62       100% { -webkit-transform: rotate(0deg) rotate3d(0, 1, 0, 0deg); }
  63     }
  64
  65     @-webkit-keyframes animation11 {
  66       0% { -webkit-transform: scale(1) rotate3d(0, 1, 0, 0deg); }
  67       50% { -webkit-transform: scale(3) rotate3d(0, 1, 0, 45deg); }
  68       100% { -webkit-transform: scale(1) rotate3d(0, 1, 0, 0deg); }
  69     }
  70
  71     @-webkit-keyframes animation12 {
  72       0% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0) rotate3d(0, 1, 0, 0deg); }
  73       50% { -webkit-transform: matrix(-1, .5, .2, -1, 100, 100) rotate3d(0, 1, 0, 45deg); }
  74       100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0) rotate3d(0, 1, 0, 0deg); }
  75     }
  76
  77     @-webkit-keyframes animation13 {
  78       0% { -webkit-transform: translateX(0px) rotate3d(1, 1, 1, 0deg) scale(1); opacity(1); }
  79       50% { -webkit-transform: translateX(100px) rotate3d(1, 1, 1, 45deg) scale(-10); opacity(0); }
  80       100% { -webkit-transform: translateX(0px) rotate3d(1, 1, 1, 0deg) scale(1); opacity(1); }
  81     }
  82
  83     @-webkit-keyframes animation14 {
  84       0% { -webkit-transform: rotate(0deg) rotate3d(1, 1, 1, 0deg) translateZ(0px); opacity(1); }
  85       50% { -webkit-transform: rotate(180deg) rotate3d(1, 1, 1, 45deg) translateZ(500px); opacity(0); }
  86       100% { -webkit-transform: rotate(0deg) rotate3d(1, 1, 1, 0deg) translateZ(0px); opacity(1); }
  87     }
  88
  89 /*  @-webkit-keyframes animation15 {                                                                   */
  90 /*    0% { -webkit-transform: translateZ(0px) rotate3d(1, 1, 1, 0deg) rotate(0deg); opacity(1); }      */
  91 /*    50% { -webkit-transform: translateZ(500px) rotate3d(1, 1, 1, 45deg) rotate(180deg); opacity(0); }*/
  92 /*    100% { -webkit-transform: translateZ(0px) rotate3d(1, 1, 1, 0deg) rotate(0deg); opacity(1); }    */
  93 /*  }                                                                                                  */
  94
  95     @-webkit-keyframes animation15 {
  96       0% { -webkit-transform: scale(1) rotate3d(1, 1, 1, 0deg); opacity(1); }
  97       50% { -webkit-transform: scale(3) rotate3d(1, 1, 1, 45deg); opacity(0); }
  98       100% { -webkit-transform: scale(1) rotate3d(1, 1, 1, 0deg); opacity(1); }
  99     }
 100
 101     @-webkit-keyframes animation16 {
 102       0% { -webkit-transform: matrix(10, 0, 0, 10, 0, 0) rotate3d(1, 1, 1, 0deg); opacity(1); }
 103       50% { -webkit-transform: matrix(-1, 0, 0, 0, 0, 0) rotate3d(1, 1, 1, 45deg); opacity(0); }
 104       100% { -webkit-transform: matrix(10, 0, 0, 10, 0, 0) rotate3d(1, 1, 1, 0deg); opacity(1); }
 105     }
 106
 107     div {
 108       position: absolute;
 109       -webkit-transform-style: preserve-3d;
 110     }
 111
 112     .poster {
 113       height: 50px;
 114       width: 50px;
 115       background-color: gray;
 116       -webkit-border-radius: 10px;
 117       font-family: 'Georgia', serif;
 118       border: 2px solid black;
 119       font-size: 42px;
 120       font-weight: bold;
 121       text-align: center;
 122     }
 123   </style>
 124   <script type="text/javascript">
 125     function startExperiment()
 126     {
 127       for (var i = 0; i < 16; ++i) {
 128         var elem = document.getElementById("elem" + i.toString());
 129         elem.style.left = (i % 4 * 25 + 5).toString() + "%";
 130         elem.style.top = (Math.floor(i / 4) * 25 + 5).toString() + "%";
 131         elem.style.webkitAnimationName = "animation" + (i + 1).toString();
 132         elem.style.webkitAnimationDuration = "2s";
 133         elem.style.webkitAnimationIterationCount = "infinite";
 134       }
 135     }
 136
 137     window.addEventListener('load', startExperiment, false);
 138   </script>
 139 </head>
 140 <body>
 141 <div id="elem0"><p class="poster">?</p></div>
 142 <div id="elem1"><p class="poster">?</p></div>
 143 <div id="elem2"><p class="poster">?</p></div>
 144 <div id="elem3"><p class="poster">?</p></div>
 145 <div id="elem4"><p class="poster">?</p></div>
 146 <div id="elem5"><p class="poster">?</p></div>
 147 <div id="elem6"><p class="poster">?</p></div>
 148 <div id="elem7"><p class="poster">?</p></div>
 149 <div id="elem8"><p class="poster">?</p></div>
 150 <div id="elem9"><p class="poster">?</p></div>
 151 <div id="elem10"><p class="poster">?</p></div>
 152 <div id="elem11"><p class="poster">?</p></div>
 153 <div id="elem12"><p class="poster">?</p></div>
 154 <div id="elem13"><p class="poster">?</p></div>
 155 <div id="elem14"><p class="poster">?</p></div>
 156 <div id="elem15"><p class="poster">?</p></div>
 157 </body>
 158 </html>
 159
 160