我可以将关键帧动画的进度设置为特定阶段吗？ [英] Can I set the progress of a keyframe animation to a specific stage?

问题描述

我有一个包含多个步骤的关键帧动画：

I have a keyframe animation with multiple steps:

@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设置动画的进度吗？

Is there any way I can use JavaScript to set the progress of the animation?

例如：

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

上下文：我正在尝试构建一个可拖动的界面，我需要调整动画的进度用户拖动的数量。

Context: I'm trying to build a draggable interface where I need to align the progress of the animation with the amount of dragging the user does.

推荐答案

我是否做对了，你想要开始动画而不是0％，但是40％？

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 */
}

此外，您可能想要添加

.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.

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

这篇关于我可以将关键帧动画的进度设置为特定阶段吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！