// Property indexed keyframes syntax

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

// Each CSS property specifies its keyframe values as a list,

// different properties may have differently sized lists.

// The easing property applies its timing function to all keyframes.

element.animate({

  transform: [

    'scaleY(0.5)',

    'scaleX(0.5)',

    'scaleY(0.5)',

  ],

  background: [

    'red',

    'blue',

    'orange',

    'red',

  ],

  easing: 'ease-in-out',

}, {

  duration: 2000,

  iterations: Infinity,

});