Стандартными свойствами 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);
}
}