Can I set the progress of a keyframe animation to a specific stage?

Question

I have a keyframe animation with multiple steps:

@keyframes rotateLeftSideCustom {
    0% {
    }
    40% {
        -webk         


        

Answer 1

Did I get it right, that you want to start the the animation not at 0%, but at 40%?

There's a way to do it CSS-only, by using negative value for animation-delay

.section-animation {
    animation-delay: -0.24s; /*40% of 0.6s */
}

Additionally, you might want to add

.section-animation {
    animation-play-state: paused;
}

to your element, so that you might can see the state of the animation as a static image, not animated.

Here's a link: https://css-tricks.com/starting-css-animations-mid-way/