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>