Example of CSS animation-timing-function Property with linear,ease,ease-in, ease-out and ease-in-out values

Source Code: (back to article)

Result: Report an issue

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

<!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>Animation-timing-function example</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>