31. Keyframes
Another example of how you can animate between different keyframes.
Code component
export function CC31Keyframes() {
return (
<Frame
// Visual & layout
size={150}
radius={30}
backgroundColor="#fff"
center
// Animation
animate={{
scale: [1, 1.25, 1],
rotate: [0, 90, 180],
}}
transition={{ yoyo: Infinity }}
/>
)
}
Framer Motion
export function FM31Keyframes() {
return (
<Center>
<motion.div
style={{
width: 150,
height: 150,
borderRadius: 30,
backgroundColor: "#fff",
}}
animate={{
scale: [1, 1.25, 1],
rotate: [0, 90, 180],
}}
transition={{ yoyo: Infinity }}
/>
</Center>
)
}
Override
export function Keyframes(): Override {
return {
animate: {
scale: [1, 1.25, 1],
rotate: [0, 90, 180],
},
transition: { yoyo: Infinity },
}
}