Позвольте ключам следовать друг за другом ⇐ CSS

[Anonymous]

Я хочу, чтобы анимация происходила в следующем порядке:
Эффект интерференции сигналов --> дрожание --> пауза.
И затем начало заново.
Но вместо этого это происходит в следующем порядке:
Эффект интерференции сигналов --> бесконечное дрожание.
В чем проблема?

Код: Выделить всё

/* Signal interference effect */
@keyframes interference {
0% {
transform: skewX(0)
}

31% {
transform: skewX(-2deg)
}

31.5% {
transform: skewX(89deg)
}

32% {
transform: skewX(89deg)
}

32.1% {
transform: skewX(0)
}

33% {
transform: skewX(2deg)
}

54% {
transform: skewX(0deg)
}

94% {

transform: skewX(2deg)
}

95.1% {
transform: skewX(-3deg)
}

95.2% {
transform: skewX(-89deg)
}

95.3% {
transform: skewX(2deg)
}

100% {
transform: skewX(0)
}
}

/* Shake from right to left */
@keyframes shake {

0%,
100% {
transform: translateX(0);
}

25% {
transform: translateX(-5px);
}

50% {
transform: translateX(5px);
}

75% {
transform: translateX(-3px);
}
}

@keyframes none {

0%,
100% {
transform: none;
}
}

/* effect sequence */
.glitch-sequence {
animation: interference 1s ease,     /* signal interference for 1 second */
shake 1s ease 1s,         /* Shake starts after 1 second */
none 2s linear 2s;        /* Pause starts after 2 seconds */
animation-iteration-count: infinite; /* Repeat endlessly */
}

Example< /code>
< /div>
< /div>
< /p>
Я попытался сделать это в желании, который я хотел. Я потерпел неудачу. Я ожидаю, что это произойдет в желании, который я хочу.


Подробнее здесь: https://stackoverflow.com/questions/793 ... ne-another