ManualTests/transition-timing-functions.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2   "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4   <head>
   5     <meta http-equiv="Content-type" content="text/html; charset=utf-8">
   6     <title>Timing Functions for Transitions</title>
   7     <style type="text/css" media="screen">
   8
   9       body {
  10         margin: 10px;
  11         padding: 0;
  12       }
  13
  14       .container div {
  15         position: relative;
  16         width: 250px;
  17         height: 50px;
  18         background: #99c;
  19         -webkit-transition-property: left;
  20         -webkit-transition-duration: 5s;
  21         margin-bottom: 10px;
  22       }
  23
  24       .container:hover .default,
  25       .container:hover .ease,
  26       .container:hover .linear,
  27       .container:hover .ease-in,
  28       .container:hover .ease-out,
  29       .container:hover .ease-in-out,
  30       .container:hover .cubic,
  31       .container:hover .error {
  32         left: 400px;
  33       }
  34
  35       .container .ease {
  36         -webkit-transition-timing-function: ease;
  37       }
  38
  39       .container .linear {
  40         -webkit-transition-timing-function: linear;
  41       }
  42
  43       .container .ease-in {
  44         -webkit-transition-timing-function: ease-in;
  45       }
  46
  47       .container .ease-out {
  48         -webkit-transition-timing-function: ease-out;
  49       }
  50
  51       .container .ease-in-out {
  52         -webkit-transition-timing-function: ease-in-out;
  53       }
  54
  55       .container .cubic {
  56         -webkit-transition-timing-function: cubic-bezier(.42, .0, .58, 1.0)
  57       }
  58
  59       .container .error {
  60         -webkit-transition-timing-function: bananas;
  61       }
  62
  63       #endmarker {
  64         position: absolute;
  65         width: 10px;
  66         left: 400px;
  67         top: 100px;
  68         height: 500px;
  69         background-color: red;
  70       }
  71
  72
  73     </style>
  74   </head>
  75   <body>
  76     <div id="endmarker">
  77     </div>
  78
  79     <h1>Timing functions for transitions</h1>
  80     <p>On hover, the elements below should transition using the
  81       described timing functions</p>
  82
  83     <div class="container">
  84
  85       <div class="default">
  86         Default (no timing function specified, should be the same as Ease)
  87       </div>
  88
  89       <div class="ease">
  90         Ease (the default ease function)
  91       </div>
  92
  93       <div class="linear">
  94         Linear
  95       </div>
  96
  97       <div class="ease-in">
  98         Ease In
  99       </div>
 100
 101       <div class="ease-out">
 102         Ease Out
 103       </div>
 104
 105       <div class="ease-in-out">
 106         Ease In Out
 107       </div>
 108
 109       <div class="cubic">
 110         Cubic bezier specified the same as Ease In Out
 111       </div>
 112
 113       <div class="error">
 114         Bogus definition, should become default of Ease
 115       </div>
 116
 117     </div>
 118
 119
 120
 121   </body>
 122 </html>