<div class="anime"></div>

body {
  padding: 10px;
}
.anime {
  width: 100px;
  height: 100px;
  background-color: orange;
  border-radius: 3px;
}

(function() {
  var eleAnime = document.querySelector('.anime');
  eleAnime.animate(
		// 对应的是@keyframes
		[
			{
				offset: 0,
      			transform: 'none'
    		},
    		{
    			offset: 0.25,
      			transform: 'translate(200px, 0)'
    		},
    		{
    			offset: 0.5,
      			transform: 'translate(200px, 200px)'
    		},
    		{
    			offset: 0.75,
      			transform: 'translate(0, 200px)'
    		},
    		{
    			offset: 1,
      			transform: 'none'
    		}
		],
		//对应的是animation-*
		{
			delay: 500,
    	endDelay: 0,
    	fill: 'both',
    	iterationStart: 0,
    	iterations: 50,
    	duration: 1000,
    	direction: 'normal',
    	easing: 'cubic-bezier(.6, 0, 1, .6)'
		}
	);

})();