JSFiddle - React, Tailwind, and code Playground

HTML

<div id="element"></div>

CSS

#element {
    background-color: green;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50px;
    left: 50px;
}

JavaScript

// first animation
var x = 0,
    y = 0;

var intervalId = setInterval(function() {
    // update x and y
    x+=2;
    y+=2;
    
    $('#element').css({
        '-webkit-transform': 'translate3d(' + x + 'px, ' + y + 'px, 0px)'
    });
    
    if (x >= 100 || y >= 100) {
        clearInterval(intervalId);
        secondAnimation();
    }
}, 33);

// second animation (somewhere else)

// wait until previous animation is finished
function secondAnimation() {
    
    // now I'd like to move the element 10px from its current position
    $('#element').css({
        '-webkit-transform': 'translate3d(10px, 10px, 0px)'
    });    
};