CSS заставляет анимацию полностью завершиться при нажатии, активной или фокусной? ⇐ CSS

[Anonymous]

Дано:

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

.button_focus, .button_active {
width: 8rem;
height: 5rem;
background-color: #e4e7eb;
}

.button_focus:focus,
.button_active:active {
animation-name: clickAnimation;
animation-duration: 250ms;
animation-timing-function: ease-in-out;
}

@KeyFrames clickAnimation {
0.00% { background-color: #d5d7da; }
14.29% { background-color: #ced0d3; }
28.57% { background-color: #bbbbbb; }
42.86% { background-color: #b1b2b3; }
57.14% { background-color: #b1b2b3; }
71.43% { background-color: #bbbbbb; }
85.71% { background-color: #ced0d3; }
100.00% { background-color: #d5d7da; }
}

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

focus


active

Я хочу найти способ рассылать спам — нажмите кнопку и анимация будет полностью обрабатываться каждый раз. В настоящее время при использовании псевдокласса :focus мне нужно щелкнуть кнопку, а затем щелкнуть ее, чтобы анимация повторно инициализировалась при повторном нажатии кнопки.
И наоборот, если я использую псевдокласс :active, анимация воспроизводится при каждом последующем щелчке мыши, но не завершается полностью. Мне нужно нажать кнопку и удерживать ее в течение 250 мс, чтобы анимация была полностью завершена.

На SO есть несколько сообщений по этому поводу, и решения, похоже, добавляют класс анимации с использованием JS и впоследствии удаляют его, но в большинстве сообщений вопросы связаны с наведением курсора. В моем случае это всего лишь щелчок, поэтому я не понимаю, как я могу добавить класс анимации и удалить его в какой-то момент. Наверное, я просто запутался.
Есть ли у кого-нибудь идеи или советы?

Подробнее здесь: https://stackoverflow.com/questions/685 ... e-or-focus