tools/perf/page_sets/key_silk_cases/font_wipe.html

   1
   2 <!DOCTYPE html>
   3 <html>
   4 <head>
   5   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   6   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   7   <title> - jsFiddle demo by jmgoog</title>
   8 <link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
   9
  10   <style type='text/css'>
  11     @-webkit-keyframes clip-animation {
  12     0% {
  13         -webkit-clip-path: polygon(-200px 0px, 0px 0px, -200px 200px, -200px 200px, -200px 0px);
  14     }
  15     90% {
  16         -webkit-clip-path: polygon(-200px 0px, 400px 0px, 200px 200px, -200px 200px, -200px 0px);
  17     }
  18 }
  19
  20 @-webkit-keyframes slide-animation
  21 {
  22     0% {left: -30px;}
  23     100% {left: 0px;}
  24 }
  25
  26 .div1
  27 {
  28     position: absolute;
  29     width:200px;
  30     height:200px;
  31     color:gray;
  32     font-size: 100pt;
  33     font-family: 'Roboto Light' sans-serif;
  34     font-weight: 300;
  35 }
  36
  37 .div2
  38 {
  39     -webkit-clip-path: polygon(0px 0px, 0px 0px, -40px 80px, 0px 80px, 0px 0px);
  40     position: absolute;
  41     width:240px;
  42     height:240px;
  43     color:gray;
  44     background-color: white;
  45     font-size: 100pt;
  46     font-family: 'Roboto Light' sans-serif;
  47     font-weight: 300;
  48 }
  49
  50 .div2.hover {
  51     -webkit-animation: clip-animation 0.5s;
  52     -webkit-clip-path: polygon(0px 0px, 200px 0px, 200px 200px, 0px 200px, 0px 0px);
  53 }
  54
  55 .div3
  56 {
  57     position: absolute;
  58 }
  59
  60 .div3.hover {
  61 -webkit-animation: slide-animation 1.0s;
  62 }
  63
  64   </style>
  65
  66
  67
  68 <script type='text/javascript'>//<![CDATA[
  69 window.onload=function(){
  70
  71 }//]]>
  72     setInterval(function() {
  73       document.querySelector('.div2').classList.toggle('hover');
  74       document.querySelector('.div3').classList.toggle('hover');
  75     }, 1500);
  76 </script>
  77
  78
  79 </head>
  80 <body>
  81   <body>
  82
  83     <div class="div1">9&deg;</div>
  84     <div class="div2"><div class="div3">23&deg;</div>
  85     </div>
  86
  87 </body>
  88
  89
  90 </body>
  91
  92
  93 </html>