20. Colors: Keyframe animation

A repeating (and reversing) keyframe animation between three colors.

Note that the middle color is actually… no color, 100% transparent black: "rgba(0,0,0,0)".

export function Example() {
    return (
        <motion.div
            style={{
                width: "100vw",
                height: "100vh",
                backgroundColor: "#60f",
                display: "flex",
                placeItems: "center",
                placeContent: "center"
            }}
            animate={{ backgroundColor: ["#0af", "rgba(0,0,0,0)", "#fa0"] }}
            transition={{
                duration: 2,
                repeat: Infinity,
                repeatType: "reverse"
            }}
        >
            <motion.div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 30,
                    backgroundColor: "#fff"
                }}
                animate={{ rotate: [0, 180] }}
                transition={{
                    duration: 2,
                    repeat: Infinity,
                    repeatType: "reverse"
                }}
            />
        </motion.div>
    );
}