CSS3 animation-timing-function property difference

Shos the diffence between ease, ease-in-out and linear for the animation-timing-function property in CSS3

by Sub Lines

HTML

<!-- Note: This example does not work in old Internet Explorers and Opera -->
<p>CSS3 animation-timing-function property difference</p>
<div id="top"></div>
<div id="one">mymove 5s (ease) infinite</div>
<div id="two">mymove 5s ease-in-out infinite</div>
<div id="three">mymove 5s linear infinite</div>
<div id="bottom"></div>

CSS

body {padding:20px;color:white}
p {color:black}
#top {
    position: absolute; 
    top: 100px;
    width: 500px;
    height: 2px;
    background: black;
}

#bottom {
    position: absolute; 
    top: 400px;
    width: 500px;
    height: 2px;
    background: black;
}

#one {
    position: absolute; 
    left: 20px;
    width: 100px;
    height: 100px;
    margin: 20px;
    background: blue;
    animation: mymove 5s infinite; /* ease is default value */
    -moz-animation: mymove 5s infinite; /* Firefox */
    -webkit-animation: mymove 5s infinite; /* Safari and Chrome */
}

#two {
    position: absolute; 
    left: 180px;
    width: 100px;
    height: 100px;
    margin: 20px;
    background: red;
    animation: mymove 5s ease-in-out infinite;
    -moz-animation: mymove 5s ease-in-out infinite; /* Firefox */
    -webkit-animation: mymove 5s ease-in-out infinite; /* Safari and Chrome */
}

#three {
    position: absolute; 
    left: 360px;
    width: 100px;
    height: 100px;
    margin: 20px;
    background: green;
    animation: mymove 5s linear infinite;
    -moz-animation: mymove 5s linear infinite; /* Firefox */
    -webkit-animation: mymove 5s linear infinite; /* Safari and Chrome */
}

@keyframes mymove {
      from {top:80px;}
      to {top:280px;}
}

@-moz-keyframes mymove /* Firefox */ {
      from {top:80px;}
      to {top:280px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */ {
      from {top:80px;}
      to {top:280px;}
}