为什么CSS动画没有持续时间？

我有一些动画应该从一个状态转到另一个状态。从状态

empty

到状态

bit

效果很好，从

bit

到

large

效果也很好，但是当我尝试使用作为类添加的反向动画时，动画没有持续时间。以下是我的代码片段：

@keyframes empty-bit {
  0%   {width: 0%;}
  100% {width: 4px;}
}
@keyframes bit-large {
  0%   {width: 4px;}
  100% {width: 100%;}
}
.timeline-empty-bit {
  animation-name: empty-bit;
  animation-fill-mode: forwards;
  animation-duration: 200ms;
  animation-timing-function: ease-in-out;
  animation-delay: 200ms;
}
.timeline-bit-large {
  animation-name: bit-large;
  animation-fill-mode: forwards;
  animation-duration: 200ms;
  animation-timing-function: ease-in-out;
}
.timeline-large-bit {
  animation-name: bit-large;
  animation-fill-mode: forwards;
  animation-duration: 200ms;
  animation-timing-function: ease-in-out;
  animation-direction: reverse;
  animation-delay: 200ms;
}
.timeline-bit-empty {
  animation-name: empty-bit;
  animation-fill-mode: forwards;
  animation-duration: 200ms;
  animation-timing-function: ease-in-out;
  animation-direction: reverse;
}

下面是一个JSFIDLE： 使用箭头（左、右）查看动画。

动画确实有持续时间。问题是动画已完成播放，更改类不会从一开始播放动画，除非“动画名称”属性更改。因此，解决这个问题的一种方法是为

位空

和

大位

类创建单独的动画：

.timeline-gauge {
    height: 20px;
}
.timeline-gauge-container {
    display: inline-block;
    height: 100%;
}
.timeline-gauge-part {
    display: block;
    height: 100%;
    width: 0%;
}
@keyframes empty-bit {
    0%   {width: 0%;}
    100% {width: 4px;}
}
@keyframes bit-empty {
    0%   {width: 0%;}
    100% {width: 4px;}
}
@keyframes bit-large {
    0%   {width: 4px;}
    100% {width: 100%;}
}
@keyframes large-bit {
    0%   {width: 4px;}
    100% {width: 100%;}
}
.timeline-empty-bit {
    animation-name: empty-bit;
    animation-fill-mode: both;
    animation-duration: 200ms;
    animation-timing-function: ease-in-out;
    animation-delay: 200ms;
}
.timeline-bit-large {
    animation-name: bit-large;
    animation-fill-mode: both;
    animation-duration: 200ms;
    animation-timing-function: ease-in-out;
}
.timeline-large-bit {
    animation-name: large-bit;
    animation-fill-mode: both;
    animation-duration: 200ms;
    animation-timing-function: ease-in-out;
    animation-direction: reverse;
    animation-delay: 200ms;
}
.timeline-bit-empty {
    animation-name: bit-empty;
    animation-fill-mode: both;
    animation-duration: 200ms;
    animation-timing-function: ease-in-out;
    animation-direction: reverse;
}

var containers=document.getElementsByClassName（“时间线仪表容器”）；
变量长度=容器长度；
对于（变量i=0；i0）{
移除动画（部分[索引-1]）；
零件[index-1].classList.add（“时间线大位”）；
如果（索引！=长度）{
移除动画（零件[索引]）；
零件[index].classList.add（“时间线位为空”）；
}
索引--；
}
if（event.keyCode==39&&index
.timeline仪表{
高度：20px；
}
.时间线仪表容器{
显示：内联块；
身高：100%；
}
.时间轴仪表部件{
显示：块；
身高：100%；
宽度：0%；
}
@关键帧空位{
0%{宽度：0%；}
100%{宽度：4px；}
}
@关键帧位为空{
0%{宽度：0%；}
100%{宽度：4px；}
}
@关键帧有点大{
0%{宽度：4px；}
100%{宽度：100%；}
}
@大位关键帧{
0%{宽度：4px；}
100%{宽度：100%；}
}
.时间线空位{
动画名称：空位；
动画填充模式：两者都有；
动画持续时间：200ms；
动画计时功能：轻松进出；
动画延迟：200ms；
}
.时间线有点大{
动画名称：有点大；
动画填充模式：两者都有；
动画持续时间：200ms；
动画计时功能：轻松进出；
}
.时间线大位{
动画名称：大位；
动画填充模式：两者都有；
动画持续时间：200ms；
动画计时功能：轻松进出；
动画方向：反向；
动画延迟：200ms；
}
.时间线位为空{
动画名称：位空；
动画填充模式：两者都有；
动画持续时间：200ms；
动画计时功能：轻松进出；
动画方向：反向；
}

这不是我的专业领域……但如果我按几次右箭头，然后按几次左箭头（不止一次），我会看到大的块像你提到的那样快速消失……但是右边的小块似乎消失得很慢（带有动画）。也许你只是因为一个类型错误而导致了一个“fencepost”或其他错误？嗯，我试着调试它，它似乎很好地添加了类。我也在Chrome中手动添加和删除类，同样的行为仍然存在。真棒的答案！谢谢。