Использование чистой CSS-анимации для изменения оператора позиции в toggleclass [дубликат] ⇐ Jquery

[Гость]

Я использую простую CSS-анимацию и, нажимая кнопку, переключаю класс и воспроизвожу анимацию в обратном направлении. К сожалению, анимация воспроизводится правильно при загрузке страницы, но когда я нажимаю кнопку, анимация не запускается, последний ключевой кадр отображается без анимации и задержки.

нажмите пролет {дисплей: блок; ширина: 100 пикселей; высота: 100 пикселей;} @keyframes а{ из {фон:красный;} в {фон:лайм;} } .открыто{ анимация: 1с; направление анимации: обратное; режим анимации-заполнения: вперед; анимация-задержка: 3 с; } охватывать{ анимация: 1с; режим анимации-заполнения: вперед; анимация-задержка: 3 с; } $("кнопка").click(function(){ $("span").toggleClass("открыто"); }); Вот мой пример кодовой ручки