JSFiddle - React, Tailwind, and code Playground

by AD7six

HTML

<button class="paused">Pause</button>
<button class="slow">Slow</button>
<button class="fast">Fast</button>
<div class="slow">slow</div>

CSS

@-webkit-keyframes pan {
    from {
        left: 10%;
    }
    to {
        left: 90%;
    }
}
div {
    border: 1px solid black;
    position: absolute;
    top: 20%;
    border-radius: 100%;
    padding: 1em;
}
div.reset {
    -webkit-animation: none;
}
div.slow {
    -webkit-animation: pan 10s linear infinite;
}
div.fast {
    -webkit-animation: pan 1s linear infinite;
}
div.paused {
    -webkit-animation-play-state: paused;
}

JavaScript

var dot = $('div');

$('button').click(function () {
    var c = $(this).attr('class');

    if (c === 'paused') {
        dot.toggleClass('paused');
        dot.html(dot.attr('class'));
        return;
    }

    dot.removeClass('pause slow fast')
        .addClass('reset');

    setTimeout(function () {
        dot.removeClass('reset')
            .toggleClass(c)
            .html(dot.attr('class'));
    }, 10);

});