23. Colors: Keyframe animation

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

Code component

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

export default function CC_23_Colors_Keyframe_animation(props) {
    return (
        <motion.div
            style={{
                width: 400,
                height: 400,
                ...props.style,
                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>
    )
}

Code overrides

export function Background(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                animate={{ backgroundColor: ["#0af", "rgba(0,0,0,0)", "#fa0"] }}
                transition={{
                    duration: 2,
                    repeat: Infinity,
                    repeatType: "reverse",
                }}
            />
        )
    }
}

export function Colors_Keyframe_animation(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                animate={{ rotate: [0, 180] }}
                transition={{
                    duration: 2,
                    repeat: Infinity,
                    repeatType: "reverse",
                }}
            />
        )
    }
}