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 },
    }
}