Почему нет задержки между повторами анимации?

Question

[Hahaz]

span {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .1),
        0 0 0 8px rgba(255, 255, 255, .1),
        0 0 20px rgba(255, 255, 255, 1);
    animation: animate 3s linear infinite;
    right: 50%;
    top: -50px; 

}

span:before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    height: 1px;
    background: linear-gradient(90deg, #fff, transparent);
}

@keyframes animate {
    0% {
        transform: rotate(-45deg) translateX(0);
        opacity: 0;
        animation-delay: 5s; 
    }

    10%, 25% {
        opacity: 1;
        animation-delay: 8s; 
    }

    100% {
        transform: rotate(-45deg) translateX(-1000px);
        opacity: 0;
    }
}

Answer 1

[Евгений Косухин]

Думаю потому что animation-delay не относится к анимируемым свойствам css

https://www.w3schools.com/cssref/css_animatable.php

Comments

[Евгений Косухин]

Темболее анимация то уже начата
Судя по описанию animation-delay
https://developer.mozilla.org/en-US/docs/Web/CSS/a...

Оно работает только на начало анимации, нужно что то другое придумывать

[Евгений Косухин]

Думаю возможно через расстановку процентов внутри keyframes можно регулировать нужные задержки

span {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .1),
        0 0 0 8px rgba(255, 255, 255, .1),
        0 0 20px rgba(255, 255, 255, 1);
    animation: animate 10s linear infinite;
    right: 50%;
    top: -50px; 
}

span:before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    height: 1px;
    background: linear-gradient(90deg, #fff, transparent);
}

@keyframes animate {
    0%, 60% {
        transform: rotate(-45deg) translateX(0);
        opacity: 0;
    }

    61%, 80% {
        opacity: 1;
    }

    100% {
        transform: rotate(-45deg) translateX(-1000px);
        opacity: 0;
    }
}