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",
}}
/>
)
}
}