A repeating (and reversing) keyframe animation between three colors.
open in CodeSandboxNote 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>
);
}