animation-play-state

by Umar

HTML

<div id="body"> Hover to pause animation</div>

CSS

#body {
    color: #fff;
    height: 300px;
    line-height: 280px;
    text-align: center;
    width: 400px;
    -webkit-animation: test 2s linear infinite;
       -moz-animation: test 2s linear infinite;
        -ms-animation: test 2s linear infinite;
         -o-animation: test 2s linear infinite;
            animation: test 2s linear infinite;
    -webkit-animation-play-state: running;
       -moz-animation-play-state: running;
        -ms-animation-play-state: running;
         -o-animation-play-state: running;
            animation-play-state: running;
}
#body:hover {
    -webkit-animation-play-state: paused;
       -moz-animation-play-state: paused;
        -ms-animation-play-state: paused;
         -o-animation-play-state: paused;
            animation-play-state: paused;
}

@-webkit-keyframes test {
    0% { background: red; }
    25% { background: yellow; }
    50% { background: green; }
    75% { background: blue; }
    100% {background: red; }
}
@-moz-keyframes test {
    0% { background: red; }
    25% { background: yellow; }
    50% { background: green; }
    75% { background: blue; }
    100% {background: red; }
}
@-ms-keyframes test {
    0% { background: red; }
    25% { background: yellow; }
    50% { background: green; }
    75% { background: blue; }
    100% {background: red; }
}
@-o-keyframes test {
    0% { background: red; }
    25% { background: yellow; }
    50% { background: green; }
    75% { background: blue; }
    100% {background: red; }
}
@keyframes test {
    0% { background: red; }
    25% { background: yellow; }
    50% { background: green; }
    75% { background: blue; }
    100% {background: red; }
}