Нужна помощь в анимации с помощью API CSS Web Animation ⇐ CSS

[Anonymous]

Я пытаюсь переключить анимацию на элементе, используя API CSS Web Animations (WAAPI). В частности, я хочу, чтобы анимация плавно переходила между двумя состояниями на каждом нажатии кнопки - по сути, продвигаясь вперед на первом щелчке, а затем переворачивался на второй, и т. Д. /> ! Важно!
Я также хочу, чтобы коробка получила конец стилей анимации. />https://codepen.io/mab141211/pen/vyyoojw
const keyframes = [
{ border: '2px solid red', width: '200px', backgroundColor: 'blue', offset: 0, },
{ border: '6px solid green', width: '250px', backgroundColor: 'purple', offset: 1, },
];

// Options
const options = {
duration: 200,
easing: 'ease-in',
fill: 'both',
};

let isPlayingForward = true;

const animation = box.animate(keyframes, options);
animation.pause();

button.addEventListener('click', () => {
if (isPlayingForward) {
animation.play();
} else {
animation.reverse();
}

isPlayingForward = !isPlayingForward;
});```


Подробнее здесь: https://stackoverflow.com/questions/796 ... ations-api