tools/perf/page_sets/key_idle_power_cases/css-animation.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>CSS Animation Test</title>
   5     <meta name="viewport" content="initial-scale=0.60, minimum-scale=0.60, maximum-scale=0.60">
   6     <style type="text/css">
   7
   8       #stage {
   9         margin: 150px auto;
  10         width: 600px;
  11         height: 400px;
  12         /*
  13
  14         Setting the perspective of the contents of the stage
  15         but not the stage itself
  16
  17         */
  18         -webkit-perspective: 800;
  19       }
  20
  21       #rotate {
  22         margin: 0 auto;
  23         width: 600px;
  24         height: 400px;
  25         /* Ensure that we're in 3D space */
  26         -webkit-transform-style: preserve-3d;
  27         /*
  28         Make the whole set of rows use the x-axis spin animation
  29         for a duration of 7 seconds, running infinitely and linearly
  30         */
  31         -webkit-animation-name: x-spin;
  32         -webkit-animation-duration: 7s;
  33         -webkit-animation-iteration-count: infinite;
  34         -webkit-animation-timing-function: linear;
  35       }
  36
  37       .ring {
  38         margin: 0 auto;
  39         height: 110px;
  40         width: 600px;
  41         -webkit-transform-style: preserve-3d;
  42         -webkit-animation-iteration-count: infinite;
  43         -webkit-animation-timing-function: linear;
  44       }
  45
  46       .ring > :nth-child(odd) {
  47         background-color: #995C7F;
  48       }
  49
  50       .ring > :nth-child(even) {
  51         background-color: #835A99;
  52       }
  53
  54       .poster {
  55         position: absolute;
  56         left: 250px;
  57         width: 100px;
  58         height: 100px;
  59         opacity: 0.7;
  60         color: rgba(0,0,0,0.9);
  61         -webkit-border-radius: 10px;
  62       }
  63
  64       .poster > p {
  65         font-family: 'Georgia', serif;
  66         font-size: 36px;
  67         font-weight: bold;
  68         text-align: center;
  69         margin-top: 28px;
  70       }
  71
  72       /*
  73       Set up each row to have a different animation duration
  74       and alternating y-axis rotation directions.
  75       */
  76       #ring-1 {
  77         -webkit-animation-name: y-spin;
  78         -webkit-animation-duration: 5s;
  79       }
  80
  81       #ring-2 {
  82         -webkit-animation-name: back-y-spin;
  83         -webkit-animation-duration: 4s;
  84       }
  85
  86       #ring-3 {
  87         -webkit-animation-name: y-spin;
  88         -webkit-animation-duration: 3s;
  89       }
  90
  91       /*
  92
  93       Here we define each of the three individual animations that
  94       we will be using to have our 3D rotation effect. The first
  95       animation will perform a full rotation on the x-axis, we'll
  96       use that on the whole set of objects. The second and third
  97       animations will perform a full rotation on the y-axis in
  98       opposite directions, alternating directions between rows.
  99
 100       Note that you currently have to specify an intermediate step
 101       for rotations even when you are using individual transformation
 102       constructs.
 103
 104       */
 105       @-webkit-keyframes x-spin {
 106         0%    { -webkit-transform: rotateX(0deg); }
 107         50%   { -webkit-transform: rotateX(180deg); }
 108         100%  { -webkit-transform: rotateX(360deg); }
 109       }
 110
 111       @-webkit-keyframes y-spin {
 112         0%    { -webkit-transform: rotateY(0deg); }
 113         50%   { -webkit-transform: rotateY(180deg); }
 114         100%  { -webkit-transform: rotateY(360deg); }
 115       }
 116
 117       @-webkit-keyframes back-y-spin {
 118         0%    { -webkit-transform: rotateY(360deg); }
 119         50%   { -webkit-transform: rotateY(180deg); }
 120         100%  { -webkit-transform: rotateY(0deg); }
 121       }
 122     </style>
 123
 124     <script type="text/javascript">
 125
 126       const POSTERS_PER_ROW = 12;
 127       const RING_RADIUS = 200;
 128
 129       function setup_posters (row)
 130       {
 131         var posterAngle = 360 / POSTERS_PER_ROW;
 132         for (var i = 0; i < POSTERS_PER_ROW; i ++) {
 133           var poster = document.createElement('div');
 134           poster.className = 'poster';
 135           // compute and assign the transform for this poster
 136           var transform = 'rotateY(' + (posterAngle * i) + 'deg) translateZ(' + RING_RADIUS + 'px)';
 137           poster.style.webkitTransform = transform;
 138           // setup the number to show inside the poster
 139           var content = poster.appendChild(document.createElement('p'));
 140           content.textContent = i;
 141           // add the poster to the row
 142           row.appendChild(poster);
 143         }
 144
 145       }
 146
 147       function init ()
 148       {
 149         setup_posters(document.getElementById('ring-1'));
 150         setup_posters(document.getElementById('ring-2'));
 151         setup_posters(document.getElementById('ring-3'));
 152       }
 153
 154       // call init once the document is fully loaded
 155       window.addEventListener('load', init, false);
 156
 157     </script>
 158   </head>
 159
 160   <body>
 161     <div id="stage">
 162       <div id="rotate">
 163         <div id="ring-1" class="ring"></div>
 164         <div id="ring-2" class="ring"></div>
 165         <div id="ring-3" class="ring"></div>
 166       </div>
 167     </div>
 168
 169   </body>
 170
 171 </html>