Pause a css animation

animation

#1

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

.animate-timeline{
    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


#2

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