Stopping animation experiments

by leaverou

HTML

<button>Click me</button>

CSS

@-webkit-keyframes bg {
    from, to { background: yellow; }
    33% { background: green; }
    66% { background: blue; }
}

button {
    font-size:200%;
    padding:.3em .5em;
    background:yellow;
    -webkit-animation:bg 5s infinite;
}

JavaScript

$('button').click(function(){
    // restart animation
    var me = this;
    this.style.webkitAnimation = 'none';
    setTimeout(function() {
        me.style.webkitAnimation = '';
    }, 10);
});