[framer-motion] 여러개의 애니메이션 연속적으로 실행시키기

import { mixinFlex } from "@/styles/mixins";
import { Stack, styled } from "@mui/material";
import { motion } from "motion/react";
import React from "react";

const Photo = () => {
  const variants = {
    initial: { y: 0, scale: 0.5 },
    moveUp: {
      y: -250,
      transition: { duration: 1 }
    },
    scaleUp: {
      scale: 1.5,
      transition: { duration: 1, delay: 1 }
    }
  };

  return <Container 
    variants={variants}
    initial="initial"
    animate={["moveUp", "scaleUp"]}
  />;
};

export default Photo;

const Container = styled(motion(Stack))`
  position: relative;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 150px;
  height: 150px;
  background-color: red;
  ${mixinFlex("column", "center", "center")}
`;