javascript – 我可以将关键帧动画的进度设置为特定阶段吗？

我有一个关键帧动画与多个步骤：

@keyframes rotateLeftSideCustom {
    0% {
    }
    40% {
        -webkit-transform: rotateY(-15deg);
        transform: rotateY(-15deg);
        opacity: .8;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: scale(0.8) translateZ(-200px);
        transform: scale(0.8) translateZ(-200px);
        opacity: 0;
    }
}

.section-animation {
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: rotateLeftSideCustom 0.6s both ease-in;
    animation: rotateLeftSideCustom 0.6s both ease-in;
}

有什么办法可以使用JavaScript来设置动画的进度吗？

例如：

document.querySelector('.section-animation').animationState('40%');

上下文：我正在尝试构建一个可拖动的界面,我需要将动画的进度与拖动用户的数量进行对齐.

解决方法

我得到的是正确的,你想开始的动画不是0％,而是40％？

有一种方法可以通过使用负值进行动画延迟来做CSS

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

此外,您可能需要添加

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

到您的元素,以便您可以将动画的状态视为静态图像,而不是动画.

这里有一个链接：https://css-tricks.com/starting-css-animations-mid-way/