Exemple de la propriété CSS transition-timing-function

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      .box {
      padding: 2em;
      width: 40px;
      height: 40px;
      left: 0;
      background-color: #666;
      position: relative;
      -webkit-transition-property: background-color, left;
      -moz-transition-property: background-color, left;
      -o-transition-property: background-color, left;
      transition-property: background-color, left;
      -webkit-transition-duration: 1s, 1s;
      -moz-transition-duration: 1s, 1s;
      -o-transition-duration: 1s, 1s;
      transition-duration: 1s, 1s;
      -webkit-transition-timing-function:  ease-out, cubic-bezier(.75, .3, .14, 1.12);
      -moz-transition-timing-function:  ease-out, cubic-bezier(.75, .3, .14, 1.12);
      -o-transition-timing-function:  ease-out, cubic-bezier(.75, .3, .14, 1.12);
      transition-timing-function:  ease-out, cubic-bezier(.75, .3, .14, 1.12);
      /* first value corresponds to the first transition-property value, and the second value corresponds to the second */
      }
      .example:hover .box {
      left: 450px;
      background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété transition-timing-function</h2>
    <p>Placez la souris sur l'élément pour voir l'effet</p>
    <div class="example">
      <div class="box"></div>
    </div>
  </body>
</html>