我有一个关键帧动画与多个步骤：
@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/
