font_wipe.html | Explore in Territory


<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <title> - jsFiddle demo by jmgoog</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>

  <style type='text/css'>
    @-webkit-keyframes clip-animation {
    0% {
        -webkit-clip-path: polygon(-200px 0px, 0px 0px, -200px 200px, -200px 200px, -200px 0px);
    }
    90% {
        -webkit-clip-path: polygon(-200px 0px, 400px 0px, 200px 200px, -200px 200px, -200px 0px);
    }
}

@-webkit-keyframes slide-animation
{
    0% {left: -30px;}
    100% {left: 0px;}
}

.div1
{
    position: absolute;
    width:200px;
    height:200px;
    color:gray;
    font-size: 100pt;
    font-family: 'Roboto Light' sans-serif;
    font-weight: 300;
}

.div2
{
    -webkit-clip-path: polygon(0px 0px, 0px 0px, -40px 80px, 0px 80px, 0px 0px);
    position: absolute;
    width:240px;
    height:240px;
    color:gray;
    background-color: white;
    font-size: 100pt;
    font-family: 'Roboto Light' sans-serif;
    font-weight: 300;
}

.div2.hover {
    -webkit-animation: clip-animation 0.5s;
    -webkit-clip-path: polygon(0px 0px, 200px 0px, 200px 200px, 0px 200px, 0px 0px);
}

.div3
{
    position: absolute;
}

.div3.hover {
-webkit-animation: slide-animation 1.0s;
}

  </style>



<script type='text/javascript'>//<![CDATA[
window.onload=function(){

}//]]>
    setInterval(function() {
      document.querySelector('.div2').classList.toggle('hover');
      document.querySelector('.div3').classList.toggle('hover');
    }, 1500);
</script>


</head>
<body>
  <body>

    <div class="div1">9&deg;</div>
    <div class="div2"><div class="div3">23&deg;</div>
    </div>

</body>


</body>


</html>
chromium/tools/perf/page_sets/key_silk_cases/font_wipe.html
