Interface Keyframes

The total duration of the animation. Set to 0.3 by default.

const transition = {
  type: "keyframes",
  duration: 2
}

<Frame
  animate={{ opacity: 0 }}
  transition={transition}
/>
Copy

An array of easing functions for each generated tween, or a single easing function applied to all tweens.

This array should be one item less than values, as these easings apply to the transitions between the values.

const transition = {
  backgroundColor: {
    type: 'keyframes',
    easings: ['circIn', 'circOut']
  }
}
Copy

An array of numbers between 0 and 1, where 1 represents the total duration.

Each value represents at which point during the animation each item in the animation target should be hit, so the array should be the same length as values.

Defaults to an array of evenly-spread durations.

Set type to "keyframes" to animate using the keyframes animation. Set to "tween" by default. This can be used to animate between a series of values.