21. Keyframes: Position and color
In this example, rotate has a conventional animation, but x, y, and backgroundColor have keyframe animations.
Code component
In the same duration of 4 seconds:
- the
xandyproperties animate through a sequence of four positions; - the
backgroundColorchanges to “#60f” and then back to “#fd3”; - and the frame 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 default function CC_21_Keyframes_Position_and_color(props) {
return (
<div style={{ width: 400, height: 400, ...props.style }}>
<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>
)
}Code override
export function Keyframes_Position_and_color(Component): ComponentType {
return (props) => {
return (
<Component
{...props}
animate={{
x: [0, 200, 200, 0, 0],
y: [0, 0, 200, 200, 0],
rotateZ: -360,
backgroundColor: ["#fd3", "#60f", "#fd3"],
}}
transition={{ duration: 4, ease: "linear" }}
/>
)
}
}