ManualTests/animate-duration.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7   <title>Overriding Animations</title>
   8   <script src="../../shared/javascript/utils.js" type="text/javascript" charset="utf-8"></script>
   9   <style type="text/css" media="screen">
  10
  11   .container {
  12      position: relative;
  13      width: 400px;
  14      height: 120px;
  15      border: 1px solid black;
  16      margin: 10px;
  17    }
  18    .box {
  19      position: relative;
  20      width: 100px;
  21      height: 100px;
  22      margin: 10px;
  23      background-color: blue;
  24      z-index: 0;
  25      -webkit-animation-name: "slide";
  26      -webkit-animation-duration: 1s;
  27      -webkit-animation-direction: alternate;
  28      -webkit-animation-timing-function: ease-in-out;
  29      -webkit-animation-iteration-count: infinite;
  30    }
  31
  32    .one {
  33      -webkit-animation-duration: 0s;
  34    }
  35
  36    .two {
  37      -webkit-animation-duration: 0;
  38    }
  39
  40    @-webkit-keyframes slide {
  41      from { -webkit-transform: translateX(0);      }
  42      to   { -webkit-transform: translateX(280px);  }
  43    }
  44
  45   </style>
  46 </head>
  47 <body>
  48   <p>Single anim (should keep animating)</p>
  49   <div class="container" onclick="toggleClassName(this, 'highlighted')">
  50     <div class="box none">
  51     </div>
  52   </div>
  53   <p>duration: "0s" (should not animate)</p>
  54   <div class="container" onclick="toggleClassName(this, 'highlighted')">
  55     <div class="box one">
  56     </div>
  57   </div>
  58   <p>duration: "0" (should animate since inherits valid duration)</p>
  59   <div class="container" onclick="toggleClassName(this, 'highlighted')">
  60     <div class="box two">
  61     </div>
  62   </div>
  63
  64 </body>
  65 </html>