// Timing parameters

// -----------------

// Web Animations inherits many of its timing parameters

// from CSS Animations.

button.addEventListener('click', function() {

  element.animate({

    transform: ['none', 'translateX(100px)'],

    background: ['green', 'lime'],

  }, {

    // Apply effect during delay.

    fill: 'backwards',

​

    // Delay starting by 500ms.

    delay: 500,

​

    // Iterations last for 2000ms.

    duration: 2000,

    // Start at 25% through an iteration.

    iterationStart: 0.25,

​

    // Run for 2 iterations.

    iterations: 2,

    // Play every second iteration backwards.

    direction: 'alternate',

    // Stop animating 500ms earlier.

    endDelay: -500,

    // The timing function to use with each iteration.

    easing: 'ease-in-out',

  });

});