web_animations_example.js

var box = document.querySelector('.box');
var message = document.querySelector('.message');

var player = box.animate([
  {
    transform: 'translateX(0)',
    opacity: 0
  },
  {
    transform: 'translateX(100px)',
    opacity: 1
  }
], {
  duration: 2000,
  iterations: 3,
  delay: 100,
  easing: 'ease-in-out',
  direction: 'alternate'
});

player.onfinish = function() {
  message.innerHTML = 'done';
};