Pause a css animation



Hello, i have been trying out {N} for a month and so far so good, but now i need to control animations, and by default there is no pause() method, tried using keyframes but didn’t have luck either

    animation-name: example;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    animation-play-state: paused;

@keyframes example {
    from { transform: translate(0,0);}
    to { transform: translate(0,200); }

i though that code should have done nothing, but the animation still plays.

my goal is to move things around on the screen meanwhile an audio plugin runs, so if i tap pause, back or foward, some elements have to react.

thanks in advance!! any tip is welcome


As of now it doesn’t seem possible through CSS but you can create Animations and gain full control from JavaScript / TypeScript.