Как сделать анимацию с бесконечным интервалом?

Question

[DeniSidorenko]

Привет есть такая анимация

keyframes mymove{
	0%:{
		transform translateY(0)
	}
	50%{
		transform: translateY(-60px)	
	}
}

И есть 3 itema

<div class='header-icon first'></div>
<div class='header-icon two'></div>
<div class='header-icon three'></div>

И задал такие стили для них

.header-icon{
transform: translateY(0)
animation-name mymove;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.header-icon.first{
animation-delay: 1s
}

.header-icon.two{
animation-delay: 4s
}

.header-icon.three{
animation-delay: 7s
}

Запятые не ставятся ибо пишу на препроцессоре Stylus

Так вот что происходит, когда загружается страница, первый элемент начинает анимацию, завершает и благодаря animation-delay, начинается анимация у второго блока, он завершает и начинается анимация у третьего блока,

Но Это только первый цикл, но мне надо постоянно, и указав
animation-iteration-count: infinite во второй раз, элементы выполняют анимацию синхроно, без animation-delay. как можно исправить что бы по типу первого цикла анимации всегда была так

Answer 1

[Алексей Арх]

Стандартными свойствами CSS неполучится, нужно как то имитировать задержку самому.
Например разбить на части, где первый блок будет прыгать в трёх случаях (10%, 30%, 50%), второй в двух (30%, 50%), а третий в одном (50%).

.header-icon {
        transform: translateY(0);
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
        animation-duration: 6s;
    }
    .header-icon.first {
        animation-name: mymove1;
    }
    .header-icon.two{
        animation-name: mymove2;
    }
    .header-icon.three{
        animation-name: mymove3;
    }
    @keyframes mymove1 {
        0%, 20%, 40%, 60% {
            transform: translateY(0);
        }
        10%, 30%, 50% {
            transform: translateY(-60px);
        }
    }
    @keyframes mymove2 {
        0%, 20%, 40%, 60%, 80% {
            transform: translateY(0);
        }
        30%, 50% {
            transform: translateY(-60px);
        }
    }
    @keyframes mymove3 {
        0%, 20%, 40%, 60%, 80%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-60px);
        }
    }

Answer 2

[Bessamuto]

Возможно эта статья поможет