/* /assets/css/animation.css */

.circle-1{
    animation:circleGrow1 4s ease forwards;
}

.circle-2{
    animation:circleGrow2 5s ease forwards;
}

.circle-3{
    animation:circleGrow3 6s ease forwards;
}

@keyframes circleGrow1{

    from{
        transform:
        translate(-50%,-50%)
        scale(.7);

        opacity:0;
    }

    to{
        transform:
        translate(-50%,-50%)
        scale(1);

        opacity:1;
    }

}

@keyframes circleGrow2{

    from{
        transform:
        translate(-50%,-50%)
        scale(.8);

        opacity:0;
    }

    to{
        transform:
        translate(-50%,-50%)
        scale(1);

        opacity:1;
    }

}

@keyframes circleGrow3{

    from{
        transform:
        translate(-50%,-50%)
        scale(.9);

        opacity:0;
    }

    to{
        transform:
        translate(-50%,-50%)
        scale(1);

        opacity:1;
    }

}