JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dings"></div>

CSS

#dings {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
    transition: transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
}

JavaScript

(function() {
    'use strict';
    
    // Liefert eine CSS-Eigenschaft mit Präfix, sofern nötig
    var testCSSProperty = function(property) {
        var style = document.documentElement.style;
        var stringType = 'string';
        if (typeof style[property] === stringType) {
            return property;
        }
        var prefixes = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'];
        for (var i = 0, l = prefixes.length; i < l; i++) {
            var prefix = prefixes[i];
            var prop = prefix + property.charAt(0).toUpperCase() + property.substring(1);
            if (typeof style[prop] === stringType) {
                return prop;
            }
        }
        return false;
    };

    var cssTransformProperty = testCSSProperty('transform');

    // Der Pfad    
    var path = [
        { x: 20, y: 60 },
        { x: 50, y: 100 },
        { x: 100, y: 100 },
        { x: 150, y: 150 },
        { x: 100, y: 200 }
    ];
    
    var el = document.getElementById('dings');
    var i = 0;
    
    // Step-Funktion
    var nextStep = function() {
        var point = path[i];
        var x = point.x, y = point.y;
        el.style[cssTransformProperty] = 'translate(' + x + 'px, ' + y + 'px)';
        i++;
        if (i === path.length) {
            i = 0;
        }
    };

    // Wenn eine Transition fertig ist, stoße die nächste an
    el.addEventListener('transitionEnd', nextStep);
    el.addEventListener('webkitTransitionEnd', nextStep);

    nextStep();
})();