我有一个包含多个步骤的关键帧动画:
@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%');
上下文:我正在尝试构建一个可拖动的界面,我需要将动画的进度与用户拖动的数量对齐。
最佳答案
我没听错吗,你想在 40% 而不是 0% 开始动画?
有一种方法可以仅使用 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/
关于javascript - 我可以将关键帧动画的进度设置为特定阶段吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29774433/