src/tools/perf/page_sets/tough_texture_upload_cases/background_color_animation_and_transform_animation.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css">
   5     @-webkit-keyframes color-animation {
   6       0% { background:#000; }
   7       100% { background:#fff; }
   8     }
   9
  10     @-webkit-keyframes transform-animation {
  11       0% { -webkit-transform: scale(1) rotate3d(1, 1, 1, 0deg); opacity(1); }
  12       50% { -webkit-transform: scale(10) rotate3d(1, 1, 1, 45deg); opacity(0); }
  13       100% { -webkit-transform: scale(1) rotate3d(1, 1, 1, 0deg); opacity(1); }
  14     }
  15
  16     div {
  17       position: absolute;
  18       -webkit-transform-style: preserve-3d;
  19     }
  20
  21     .poster {
  22       height: 50px;
  23       width: 50px;
  24       background-color: gray;
  25       -webkit-border-radius: 10px;
  26       font-family: 'Georgia', serif;
  27       border: 2px solid black;
  28       font-size: 42px;
  29       font-weight: bold;
  30       text-align: center;
  31     }
  32   </style>
  33   <script type="text/javascript">
  34     function startExperiment()
  35     {
  36       document.body.style.margin = "0";
  37       document.body.style.webkitAnimationName = "color-animation";
  38       document.body.style.webkitAnimationDuration = "0.5s";
  39       document.body.style.webkitAnimationIterationCount = "infinite";
  40       document.body.style.webkitAnimationDirection = "alternate";
  41       for (var i = 0; i < 2; ++i) {
  42         var elem = document.getElementById("elem" + i.toString());
  43         elem.style.opacity = "0.5";
  44         elem.style.width = "100%";
  45         elem.style.height = "900px";
  46         elem.style.webkitTransform = "rotate3d(1,1,0," + ((i + 1) * 10).toString() + "deg)";
  47         elem.style.webkitAnimationName = "color-animation";
  48         elem.style.webkitAnimationDuration = (i + 1).toString() + "s";
  49         elem.style.webkitAnimationIterationCount = "infinite";
  50       }
  51       var transformed_elem = document.getElementById("transformed-elem0");
  52       transformed_elem.style.left = "250px";
  53       transformed_elem.style.top = "250px";
  54       transformed_elem.style.webkitAnimationName = "transform-animation";
  55       transformed_elem.style.webkitAnimationDuration = "5s";
  56       transformed_elem.style.webkitAnimationIterationCount = "infinite";
  57     }
  58
  59     window.addEventListener('load', startExperiment, false);
  60   </script>
  61 </head>
  62 <body>
  63 <div id="elem0"></div>
  64 <div id="elem1"></div>
  65 <div id="transformed-elem0"><p class="poster">?</p></div>
  66 </body>
  67 </html>