Алексей Арх

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