@keyframes grow-flower{
    from{
        scale: 0;
    }
    to{
        /* scale: 1; */
        opacity: 1;
    }
}
@keyframes swing-flower{
    0%{
        opacity: 1;
        rotate: 0deg;
    }
    25%{
        rotate: 5deg;
    }
    50%{
        rotate: 0deg;
    }
    75%{
        rotate: -5deg;
    }
    100%{
        opacity: 1;
        rotate: 0deg;
    }
}
@keyframes leaf{
    0%{
        opacity: 0;
        transform: rotate(60deg);
        translate: -30%;
    }
    20%{
        translate: -30%;
        opacity: 0;
        transform: rotate(60deg);
    }
    60%{
        opacity: 0.8;
    }
    100%{
        opacity: 0.8;
    }
}
@keyframes leaf-two{
    0%{
        opacity: 0;
        translate: 30%;
        transform: rotate(-200deg);
    }
    20%{
        opacity: 0;
        translate: 30%;
        transform: rotate(-200deg);
    }
    60%{
        opacity: 0.8;
    }
    100%{
        opacity: 0.8;
    }
}
@keyframes bloom{
    from{
        scale: 0;
        translate: -40% 10px;
    }
    to{
        opacity: 1;
        scale: 1;
    }
}

@keyframes swing-grass{
    0%{
        opacity: 1;
        translate: 0px;
        /* transform: rotate(0deg); */
        /* rotate: 0deg; */
    }
    25%{
        translate: -20px;
        /* rotate: 2deg; */
        /* transform: rotate(2deg); */
    }
    50%{
        translate: 0px;
        /* rotate: 0deg; */
        /* transform: rotate(0deg); */
    }
    75%{
        translate: 20px;
        /* transform: rotate(-2deg); */
        /* rotate: -2deg; */
    }
    100%{
        opacity: 1;
        translate: 0px;
        /* transform: rotate(-2deg); */
        /* rotate: -2deg; */
    }
}
@keyframes glitter {
    0%{
        opacity: 0;
        translate: -20px -20px;
    }
    33%{
        translate: 40px -50px;
    }
    50%{
        opacity: 1;
    }
    66%{
        translate: 30px -120px;
    }
    100%{
        opacity: 0;
        filter: 5px;
        translate: 100px -160px;
    }
}