<div class="anime"></div>
body {
  padding: 10px;
}
.anime {
  width: 100px;
  height: 100px;
  background-color: orange;
  border-radius: 3px;
}
View Compiled
(function(){
  var eleAnime = document.querySelector('.anime');
	var animeKeyframes = {
	  transform: ['none', 'translate(200px, 0)', 'translate(200px, 200px)', 'translate(0, 200px)', 'none']
	};
	var animeOptions = {
		delay: 500,
    	endDelay: 0,
    	fill: 'both',
    	iterationStart: 0,
    	iterations: 50,
    	duration: 1000,
    	direction: 'normal',
    	easing: 'cubic-bezier(.6, 0, 1, .6)'
	};
	var effect = new KeyframeEffect(eleAnime, animeKeyframes, animeOptions);
	var animation = new Animation(effect, eleAnime.ownerDocument.timeline);
	animation.play();
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.1/web-animations-next.min.js