18. Keyframes: Position and color

In this example, rotate has a conventional animation, but x, y, and backgroundColor have keyframe animations.

In the same duration of 4 seconds:

• the x and y properties animate through a sequence of four positions;
• the backgroundColor changes to “#60f” and then back to “#fd3”;
• and the div does a (counterclockwise) 360.

These keyframe sequences can be as long as you want, and they don’t have to be the same length for all properties (the sequence for backgroundColor is shorter than those for x and y).

export function Example() {
    return (
        <div style={{ width: 400, height: 400, position: "relative" }}>
            <motion.div
                style={{
                    width: 120,
                    height: 120,
                    borderRadius: 25,
                    backgroundColor: "#fd3",
                    position: "absolute",
                    left: 40,
                    top: 40
                }}
                animate={{
                    x: [0, 200, 200, 0, 0],
                    y: [0, 0, 200, 200, 0],
                    rotate: -360,
                    backgroundColor: ["#fd3", "#60f", "#fd3"]
                }}
                transition={{ duration: 4, ease: "linear" }}
            />
        </div>
    );
}