transition-timing-functions.html [plain text]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Timing Functions for Transitions</title>
    <style type="text/css" media="screen">
      
      body {
        margin: 10px;
        padding: 0;
      }
      
      .container div {
        position: relative;
        width: 250px;
        height: 50px;
        background: #99c;
        -webkit-transition-property: left;
        -webkit-transition-duration: 5s;
        margin-bottom: 10px;
      }
      
      .container:hover .default,
      .container:hover .ease,
      .container:hover .linear,
      .container:hover .ease-in,
      .container:hover .ease-out,
      .container:hover .ease-in-out,
      .container:hover .cubic,
      .container:hover .error {
        left: 400px;
      }

      .container .ease {
        -webkit-transition-timing-function: ease;
      }

      .container .linear {
        -webkit-transition-timing-function: linear;
      }

      .container .ease-in {
        -webkit-transition-timing-function: ease-in;
      }

      .container .ease-out {
        -webkit-transition-timing-function: ease-out;
      }

      .container .ease-in-out {
        -webkit-transition-timing-function: ease-in-out;
      }

      .container .cubic {
        -webkit-transition-timing-function: cubic-bezier(.42, .0, .58, 1.0)
      }

      .container .error {
        -webkit-transition-timing-function: bananas;
      }

      #endmarker {
        position: absolute;
        width: 10px;
        left: 400px;
        top: 100px;
        height: 500px;
        background-color: red;
      }

      
    </style>
  </head>
  <body>
    <div id="endmarker">
    </div>

    <h1>Timing functions for transitions</h1>
    <p>On hover, the elements below should transition using the
      described timing functions</p>
      
    <div class="container">
      
      <div class="default">
        Default (no timing function specified, should be the same as Ease)
      </div>

      <div class="ease">
        Ease (the default ease function)
      </div>

      <div class="linear">
        Linear
      </div>

      <div class="ease-in">
        Ease In
      </div>

      <div class="ease-out">
        Ease Out
      </div>

      <div class="ease-in-out">
        Ease In Out
      </div>

      <div class="cubic">
        Cubic bezier specified the same as Ease In Out
      </div>

      <div class="error">
        Bogus definition, should become default of Ease
      </div>
      
    </div>
    
    
    
  </body>
</html>