Javascript 使用内联样式（CSS或jQuery）的过渡动画

我正在使用忍者表单附带的进度条，下面是进度条的设置

<div class="nf-progress-container">
    <div class="nf-progress" style="width: 0%;"></div>
</div>

我做了更多的调查，发现不能使用

transition

css属性设置内联样式的动画。不知道为什么，但显然你做不到

我不断地挖掘，发现了一篇文章，它让我更接近纯css动画关键帧

@-webkit-keyframes progress-bar {
   0% { width: 0; }
}
@-moz-keyframes progress-bar {
   0% { width: 0; }
}
@keyframes progress-bar {
   0% { width: 0; }
}

.nf-progress-container .nf-progress { 
  -webkit-animation: progress-bar 1s;
  -moz-animation: progress-bar 1s;
  animation: progress-bar 1s;
}

这里的好处是我实际上得到了一些动画。但是，这种方法的问题是，对于进度条的每一步，动画都从

宽度：0%

开始。我希望元素从以前的宽度（不管它是什么）过渡到新的内联样式宽度

---

是否有人知道如何使用CSS实现这一点，或者是否有办法使用jQuery实现这一点？

您在哪里读到过使用内联样式转换元素宽度是不可能的？这是可能的：

函数递增宽度（）{
var elem=document.querySelector（'span'）；
elem.style.width=elem.clientWidth+50+'px'；
}
设置间隔（增加宽度，600）

span{
高度：20px；
宽度：50px；
过渡：宽度0.5s；
背景：紫色；
显示：内联块；
}

---

我可能读错了，但这篇文章（）似乎是说他不能使用css

transition

属性来设置html元素本身内联样式的动画。如果可能的话，我希望能够单独使用css来实现这一点。@BobbyBosler看起来你链接的线程中的OP有问题，但后来它在线程中得到了解决，因为这当然是可能的（我在上面做过）。当你说你只想用CSS来做这件事的时候，你是什么意思——页面和工具栏上没有js？如果是这样，您可以使用关键帧，但如何知道何时运行动画？从上面的图片中，我的直觉是，这个条会随着用户的行为而增长，对吗？如果是这样的话，为什么不在用户操作之后使用JS来增加条数呢？我对JS不太了解，而且我刚刚在jQuery中弄湿了脚，已经够危险的了。我仍然不知道如何使用检查器来查看页面上脚本中发生了什么。我确信当单击下一步按钮时，表单正在使用JS/jQuery更改

.nf progress

的内联宽度，但我不知道如何连接到该按钮并创建动画。如果我链接到该项目，可能会更容易。你可以访问它（查看的密码是“morethanacollege”）。@Bobby啊，看来你正在使用的JS库实际上是在用条删除元素，然后创建一个新的具有新宽度的元素。这将阻止过渡。使用自定义JavaScript编写代码一点也不难。如果你愿意的话，我强烈建议你尝试这样做，因为这只需要几十行javascript就可以了，当你完成后，你会更加危险！如果你陷入困境，你可以提出问题，这样人们就可以提供帮助……我想知道是否发生了类似的事情。我一辈子都不明白为什么宽度没有动画。理论上似乎应该这样。你怎么知道JS库是什么？我似乎不知道如何利用检查员来发现那种东西。

@-webkit-keyframes progress-bar {
   0% { width: 0; }
}
@-moz-keyframes progress-bar {
   0% { width: 0; }
}
@keyframes progress-bar {
   0% { width: 0; }
}

.nf-progress-container .nf-progress { 
  -webkit-animation: progress-bar 1s;
  -moz-animation: progress-bar 1s;
  animation: progress-bar 1s;
}