Как заставить ключевые кадры CSS воспроизводиться при нажатии кнопки? ⇐ CSS

[Гость]

У меня есть CSS-анимация, которая воспроизводится в 5 ключевых кадрах. Однако я хочу привязать эти ключевые кадры к кнопке.

.water{ ширина: 162 пикселей; высота: 162 пикселей; цвет фона: #1D89E7; радиус границы: 50%; положение: относительное; переполнение: скрыто; } .water:до, .water:после{ содержание:''; позиция: абсолютная; ширина: 200%; высота: 200%; верх: -50%; осталось: 50%; фон: #fff; } .вода:до{ радиус границы: 45%; фон:#fff; анимация: волна 10 с, линейная бесконечность; } .вода:после{ радиус границы: 35%; фон:rgba(255, 255, 255, 0,3); анимация: волна 10 с, линейная бесконечность; } @keyframes волна{ 0%{ трансформировать: транслировать (-50%, -50%) вращать (0); верх: -30%; } 25%{ верх: -60%; } 50%{ трансформировать: транслировать (-50%, -50%) вращать (360 градусов); верх: -90%; } 75%{ трансформировать: транслировать (-50%, -50%) вращать (360 градусов); верх: -60%; } 100%{ трансформировать: транслировать (-50%, -50%) вращать (360 градусов); верх: -30%; } Увеличить количество воды на уровень Уменьшить количество воды на уровень

https://codepen.io/Crispy-Pvper/pen/abPqpaY

Сейчас анимация воспроизводится как обычно: уровень воды увеличивается, а затем снижается, как и ожидалось. У меня есть 5 ключевых кадров. Есть ли способ связать эти ключевые кадры с событиями/кнопками при нажатии?

Однако я хочу сделать так, чтобы анимация была привязана к нажатиям кнопок и воспроизводилась соответственно каждой кнопке. При нажатии кнопки увеличения я хочу, чтобы уровень воды воспроизводил следующий ключевой кадр, который переводит воду на следующий уровень (соответственно), и наоборот, когда нажимается кнопка уменьшения.

Может ли кто-нибудь помочь мне с этим? Спасибо.