.circle {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation: expand 1s ease-in-out forwards;
    z-index: -1;
}

@keyframes expand {
    0% {
        transform: translate(-50%, -50%) scale(0);
    }
    100% {
        transform: translate(-50%, -50%) scale(30);
    }
}