Interface IAnimationOptions

An object containing key-value pairs consisting of the property to animate and an array of values to iterate over.

element.animate({
  opacity: [ 0, 1 ],          // [ from, to ]
  color:   [ "#fff", "#000" ] // [ from, to ]
}, 2000);

Using this format, the number of elements in each array does not need to be equal. The provided values will be spaced out independently.

element.animate({
  opacity: [ 0, 1 ], // offset: 0, 1
  backgroundColor: [ "red", "yellow", "green" ], // offset: 0, 0.5, 1
}, 2000);

The special keys offset, easing, and composite (described below) may be specified alongside the property values.

element.animate({
  opacity: [ 0, 0.9, 1 ],
  offset: [ 0, 0.8 ], // Shorthand for [ 0, 0.8, 1 ]
  easing: [ 'ease-in', 'ease-out' ],
}, 2000);

After generating a suitable set of keyframes from the property value lists, each supplied offset is applied to the corresponding keyframe. If there are insufficient values, or if the list contains null values, the keyframes without specified offsets will be evenly spaced as with the array format described above.

If there are too few easing or composite values, the corresponding list will be repeated as needed.

Note: to use composite you will need to add it to the {@link AnimationOptions.extend | extend} object as an option