Exemple de la propriété transition-timing-function avec les valeurs "step-start" et "step-end"

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      .example {
      padding: 2em;
      width: 30px;
      height: 30px;
      left: 0;
      background-color: #666;
      border-radius: 50%;
      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;
      }
      .container:hover .example {
      left: 250px;
      background-color: #ccc;
      }
      .el1 {
      -webkit-transition-timing-function:  step-start;
      -moz-transition-timing-function:  step-start;
      -o-transition-timing-function:  step-start;
      transition-timing-function:  step-start;
      }
      .el2 {
      -webkit-transition-timing-function:  step-end;
      -moz-transition-timing-function:  step-end;
      -o-transition-timing-function:  step-end;
      transition-timing-function:  step-end;
      }
    </style>
  </head>
  <body>
    <h2> Exemple de la propriété transition-timing-function</h2>
    <div class="container">
      <p>
        <code>transition-timing-function: step-start;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-timing-function: step-end;</code>
      </p>
      <div class="example el2"></div>
    </div>
  </body>
</html>