transition-timing-functions.html   [plain text]

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

    <div id="endmarker">

    <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 class="ease">
        Ease (the default ease function)

      <div class="linear">

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

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

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

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

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