When you want to animate a component through several distinct stages—such as changing its color, position, or size in a sequence—you use keyframes in Framer Motion. Keyframes let you specify a list of values that an animated property should pass through, not just a start and end value. This approach offers much more control and creativity, allowing you to choreograph complex, multi-step animations that feel dynamic and engaging.

In Framer Motion, you define keyframes by passing an array of values to an animatable prop, such as x, y, scale, or backgroundColor. The animation will move through each value in the array, creating a fluid transition from one state to the next. You can also control the timing and duration between these keyframes by using the transition prop, specifying options like times (to control when each keyframe occurs) and duration.

Suppose you want a box to move horizontally across the screen while its background color shifts from red to blue to green, and then returns to red. You can achieve this by using keyframes for both the x and backgroundColor properties. Here is how you might define this animation in a Framer Motion component:

import { motion } from "framer-motion";

function AnimatedBox() {
  return (
    <motion.div
      animate={{
        x: [0, 100, 200, 0],
        backgroundColor: ["#ff0000", "#0000ff", "#00ff00", "#ff0000"]
      }}
      transition={{
        duration: 3,
        times: [0, 0.33, 0.66, 1]
      }}
      style={{
        width: 100,
        height: 100,
        borderRadius: 20
      }}
    />
  );
}

In this example, the box starts at position 0 with a red background, moves to 100 pixels and turns blue, then to 200 pixels and turns green, finally returning to the starting position and color. The times array ensures each keyframe is evenly spaced during the 3-second animation.