Home | History | Annotate | Download | only in ManualTests 
      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>