Demonstrate timing functions in rotate animation

Demonstrate timing functions in rotate circle css3 animation

HTML

<h3>Linear</h3>

<div class="rotate rotate1">I rotate</div>

<h3>ease-in</h3>

<div class="rotate rotate2">I rotate</div>

<h3>ease-out</h3>

<div class="rotate rotate3">I rotate</div>

<h3>ease-in-out</h3>

<div class="rotate rotate4">I rotate</div>

<h3>cubic-bezier(0,1.88,.59,.78)</h3>

<div class="rotate rotate5">I rotate</div>

CSS

body {
    font-family: Arial, sans-serif;
    font-size: 20px;
    text-transform: uppercase;
}
h3 {
    margin-left: 50px;
    /*color: blue;*/
}
.rotate {
    margin: 10px;
    /*background: blue;*/
    color: white;
    font-weight: bold;
    width: 150px;
    height: 150px;
    line-height: 150px;
    border-radius: 50%;
    vertical-align: middle;
    text-align: center;
    border: 4px groove orange;
}
.rotate:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
p {
    display: inline-block;
    margin: 0;
    line-height: 1;
    vertical-align: middle;
}
.rotate1 {
    -webkit-animation: 1s rotate infinite linear;
    animation: 1s rotate infinite linear;
}
.rotate2 {
    -webkit-animation: 1s rotate infinite ease-in;
    animation: 1s rotate infinite ease-in;
}
.rotate3 {
    -webkit-animation: 1s rotate infinite ease-out;
    animation: 1s rotate infinite ease-out;
}
.rotate4 {
    -webkit-animation: 1s rotate infinite ease-in-out;
    animation: 1s rotate infinite ease-in-out;
}
.rotate5 {
    -webkit-animation: 2s withpause infinite cubic-bezier(0, 1.88, .59, .78);
    /* http://cubic-bezier.com/#0,1.88,.59,.78 */
    animation: 2s rotate infinite cubic-bezier(0, 1.88, .59, .78);
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-moz-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes withpause {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
   ...