CSS @keyframes 애니메이션 속도 다르게 주기

/* 애니메이션효과 속도 다르게 주기 */

@keyframes moveCircle {

    0 {

        opacity: 1;

    }

    100% {

        transform: translateY(-500px);

        opacity: 0;

    }

}

.main_visual .circle_wrap span {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background: #b7ff0a;

    opacity: 1;

    animation: moveCircle 3s infinite;

}