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

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

javascript css

Javascript 我可以将关键帧动画的进度设置为特定阶段吗？,javascript,css,css-animations,keyframe,Javascript,Css,Css Animations,Keyframe,我有一个包含多个步骤的关键帧动画： @关键帧rotateLeftSideCustom{ 0% { } 40% { -webkit变换：旋转（-15度）；变换：旋转（-15度）；不透明度：.8； -webkit动画计时功能：轻松输出；动画计时功能：放松； } 100% { -webkit转换：缩放（0.8）translateZ（-200px）；变换：比例（0.8）translateZ（-200px）；不透明度：0； } } .动画部分{ -webkit转换来源：100%50%；变换原点

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

@关键帧rotateLeftSideCustom{
0% {
}
40% {
-webkit变换：旋转（-15度）；
变换：旋转（-15度）；
不透明度：.8；
-webkit动画计时功能：轻松输出；
动画计时功能：放松；
}
100% {
-webkit转换：缩放（0.8）translateZ（-200px）；
变换：比例（0.8）translateZ（-200px）；
不透明度：0；
}
}
.动画部分{
-webkit转换来源：100%50%；
变换原点：100%50%；
-webkit动画：rotateLeftSideCustom 0.6秒，两者都易于使用；
动画：rotateLeftSideCustom 0.6秒，两者都很容易进入；
}

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

例如：

document.querySelector（'.section animation'）.animationState（'40%）；

上下文：我正在尝试构建一个可拖动的界面，在该界面中，我需要将动画的进度与用户所做的拖动量对齐。

您可以使用jQuery进行动画。使用

.animate（）

从文档中：
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    position: relative;
    background-color: #abc;
    width: 40px;
    height: 40px;
    float: left;
    margin: 5px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p><button id="go">Run »</button></p>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

<script>
$( "#go" ).click(function() {
  $( ".block:first" ).animate({
    left: 100
  }, {
    duration: 1000,
    step: function( now, fx ){
      $( ".block:gt(0)" ).css( "left", now );
    }
  });
});
</script>

</body>
</html>


动画演示
div{
位置：相对位置；
背景色：#abc；
宽度：40px；
高度：40px；
浮动：左；
保证金：5px；
}
运行»
$（“#go”）。单击（函数（）{
$（“.block:first”）.animate({
左：100
}, {
持续时间：1000，
步骤：函数（现在，fx）{
$（“.block:gt（0）”）.css（“左”，现在）；
}
});
});

其中*now*
是动画的实际状态
更新
很可能您可以使用，但这也与我的其他解决方案类似。不同之处在于，它是纯JavaScript，因此不需要外部库。
我做对了吗，您希望动画不是以0%开始，而是以40%开始
有一种方法可以只使用CSS，使用负值表示动画延迟
.section-animation {
    animation-delay: -0.24s; /*40% of 0.6s */
}

此外，您可能需要添加
.section-animation {
    animation-play-state: paused;
}

添加到元素，以便可以将动画的状态视为静态图像，而不是动画
这里有一个链接：
Firefox有一个他们提议的AnimationEvent
，可以用来管理这类事情。不幸的是，它在生产环境中还远没有准备好使用：您是否无法使用转换
？如果动画是简单的线性事物，那么您可能不需要关键帧，可能值得一看。但是，我如何更改活动转换的状态（例如，将其设置为60%
progress）？谢谢，这是简单动画的一个很好的解决方案。当动画涉及多个步骤时，它可能会变得有点混乱。OP询问的是关键帧以及如何动态编辑它们，而不是其他解决方案，如果不可能，则会生成一个外部库相关答案，然后请解释how@ToniLeigh在纯CSS中，您无法动态编辑内容。。。此外，动态地实现这一点也没有内置的可能性。基本上，您可以使用基于javascript的第三方解决方案。但这意味着你放松了CSS的硬件加速。我正在尝试动态更新动画状态，不仅仅是开始点，但可能也是这样。当你有一个动画本身有一个动画延迟时，你可能会遇到难看的计算。但即便如此，这也不应该太复杂。最好的答案是——其他人只是建议使用外部动画库，但如果有一件事我喜欢避免供应商依赖的话，那就是动画。保留CSS特别有帮助，因为你知道资源有限的设备，如手机，将为此进行优化。如果您使用CSS transpiler，如less或sass，您可以通过使用变量非常轻松地管理延迟数。@webprogrammer您仍然可以通过javascript设置由某些事件触发的动画延迟
属性。@LorenzMerdian您无法设置动画状态。到目前为止，我的两个解决方案提供了唯一的可能性。