transitions-and-paused-animations.html [plain text]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Transitions and paused animations</title>
  <style type="text/css" media="screen">
    
    .container {
      height: 200px;
      width: 200px;
      border: 1px solid black;
      -webkit-transition: -webkit-transform 0.5s;
    }
    
    .moved {
      -webkit-transform: translateX(100px);
      
    }
    .box {
      position: relative;
      height: 100px;
      width: 100px;
      margin: 50px;
      background-color: blue;
      -webkit-transform: translateZ(0);
      -webkit-animation: fade 1s infinite linear alternate;
    }
    
    .moved .box {
      -webkit-animation-play-state: paused;
    }
    
    @-webkit-keyframes fade {
      from { -webkit-transform: rotate(-20deg); }
      to   { -webkit-transform: rotate(20deg);   }
    }
  </style>
  <script type="text/javascript" charset="utf-8">
    
    function runTest()
    {
      var box = document.querySelectorAll('.box')[0];
      var container = document.querySelectorAll('.container')[0];
      
      window.setTimeout(function() {
        container.className = 'container';
      }, 250);
      
      window.setTimeout(function() {
        container.className = 'container moved';
      }, 1500);

      window.setTimeout(function() {
        container.className = 'container';
      }, 3000);
    }
    
    window.addEventListener('load', runTest, false)
  </script>
</head>
<body>

<p>Box should animate smoothly left, then right then left again, and not jump at the end.</p>
<div class="container moved">
  <div class="box"></div>
</div>

</body>
</html>