Exemple de la propriété animation-timing-function, où les différents fonctions du temps sont illustrées

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: #1c87c9;
      color: #eee;
      font-weight: bold;
      position: relative;
      text-align: center;
      padding: 8px;
      -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
      animation: mymove 5s infinite;
      }
      /* Safari 4.0 - 8.0 */
      #div1 {-webkit-animation-timing-function: linear;}
      #div2 {-webkit-animation-timing-function: ease;}
      #div3 {-webkit-animation-timing-function: ease-in;}
      #div4 {-webkit-animation-timing-function: ease-out;}
      #div5 {-webkit-animation-timing-function: ease-in-out;}
      #div1 {animation-timing-function: linear;}
      #div2 {animation-timing-function: ease;}
      #div3 {animation-timing-function: ease-in;}
      #div4 {animation-timing-function: ease-out;}
      #div5 {animation-timing-function: ease-in-out;}
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes mymove {
      from {left: 0px;}
      to {left: 300px;}
      }
      @keyframes mymove {
      from {left: 0px;}
      to {left: 300px;}
      }
    </style>
  </head>
  <body>
    <h2>Exemple de animation-timing-function</h2>
    <div id="div1">linear</div>
    <div id="div2">ease</div>
    <div id="div3">ease-in</div>
    <div id="div4">ease-out</div>
    <div id="div5">ease-in-out</div>
  </body>
</html>