|
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> |