Animations example

by Artem

HTML

<div id="box"></div>

CSS

body {
  margin: 0;
  padding: 0;
  background-color: #ccc;
}

#box {
  width: 200px;
  height: 200px;
  background-color: #222;
  border-radius: 5px;
  border: 10px solid #fff;
}

JavaScript

'use strict';

const box = document.getElementById('box');

const player = box.animate([{
  transform: 'translate(0px, 0px)',
   offset: 0
},
{
  transform: 'translate(50px, 25px)',
   offset: 0.25
},
{
  transform: 'translate(25px, 50px)',
   offset: 0.45
},
{
  transform: 'translate(0px, 0px)',
   offset: 0.8
}], {
  duration: 2000,
  iterations: Infinity
});

//player.cancel();