How does the front end control the progress of css3 animation playback? either css or js method is OK?

can you use js to control the progress of css3 animation playback?
for example, my css3 animation takes a total of 1 second, and the default is 0 second.
can you make it play from 0.5 second to 1 second?
can be thought of as similar to watching a video. The total length of the video is 1 minute, but I want to pull the bar and start playing it in 30 seconds. I won"t look at the first half of the content for the time being. It does not affect the first half of the content, can it be done

Jan.17,2022

time is fixed. You can just use css, to set the delay of animation.


you can refer to this article realize JS keyframes animation with Web Animations API

.
Menu