transition-accelerated.html [plain text]

<!DOCTYPE html>

<html>
<head>
  <style type="text/css" media="screen">
    .box {
      position: relative;
      height: 100px;
      width: 100px;
      margin: 10px;
      background-color: blue;
    }
    
    .slow {
      -webkit-animation: slow 2s infinite linear alternate;
    }
    
    .fast {
      -webkit-animation: fast 2s infinite linear alternate;
    }
    
    @-webkit-keyframes slow {
      from {
        left: 0px;
      }
      to {
        left: 400px;
      }
    }

    @-webkit-keyframes fast {
      from {
        -webkit-transform: translateX(0);
      }
      to {
        -webkit-transform: translateX(400px);
      }
    }
  </style>
</head>
<body>
  <p>The lower box should animate more smoothly than the upper one (on Mac).</p>
  <div class="box slow"></div>
  <div class="box fast"></div>
</body>
</html>