在同一对象上添加第二个动画会删除 css 属性

Question

我正在尝试使用 div 和 border-bottom 属性创建进度条。

我有两个 classes:

anim-start：这使得进度条从 0 到 70%
anim-end: 这使得进度条达到 100%，并且他们移除了边框

我正在使用属性 animation-fill-mode: forwards 以便保留 css 属性。

问题是，当我应用第二个 class 时，它会删除之前 class 的属性，因此进度条会消失。

请看下面的fiddle：

  var progress_bar = document.querySelector(".progress")
  progress_bar.className = progress_bar.className + " anim-start";

  setTimeout(function() {
    progress_bar.className = progress_bar.className + " anim-end";
  }, 3000);

.progress.anim-start {
  animation-duration: 2s;
  animation-name: progress-start-anim;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes progress-start-anim {
  0% {
    border-bottom: 5px solid #333;
    width: 0%;
  }
  100% {
    border-bottom: 5px solid #333;
    width: 70%;
  }
}

.progress.anim-end {
  animation-duration: 2s;
  animation-name: progress-end-anim;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes progress-end-anim {
  99% {
    width: 100%
  }
  100% {
    border-bottom: none;
  }
}

<div class="progress">
</div>

Answer 1

您可以让第二个动画从第一个动画结束的地方开始：

  var progress_bar = document.querySelector(".progress")
  progress_bar.className = progress_bar.className + " anim-start";

  setTimeout(function() {
    progress_bar.className = progress_bar.className + " anim-end";
  }, 3000);

.progress.anim-start {
  animation-duration: 2s;
  animation-name: progress-start-anim;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes progress-start-anim {
  0% {
    border-bottom: 5px solid #333;
    width: 0%;
  }
  100% {
    border-bottom: 5px solid #333;
    width: 70%;
  }
}

.progress.anim-end {
  animation-duration: 2s;
  animation-name: progress-end-anim;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes progress-end-anim {
  0% {
    border-bottom: 5px solid #333;
    width: 70%;
  }
  99% {
    width: 100%
  }
  100% {
    border-bottom: none;
  }
}

<div class="progress">
</div>

您的版本不起作用的原因是您的第二个动画被第一个动画覆盖，而第二个动画中缺少 border-bottom: 属性。

  var progress_bar = document.querySelector(".progress")
  progress_bar.className = progress_bar.className + " anim-start";

  setTimeout(function() {
    progress_bar.className = progress_bar.className + " anim-end";
  }, 3000);

.progress.anim-start {
  animation-duration: 2s;
  animation-name: progress-start-anim;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes progress-start-anim {
  0% {
border-bottom: 5px solid #333;
width: 0%;
  }
  100% {
border-bottom: 5px solid #333;
width: 70%;
  }
}

.progress.anim-end {
  animation-duration: 2s;
  animation-name: progress-end-anim;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes progress-end-anim {
  0% {
border-bottom: 5px solid #333;
   /* */
  }
  99% {
width: 100%
  }
  100% {
border-bottom: none;
  }
}

<div class="progress">
</div>

在同一对象上添加第二个动画会删除 css 属性

Adding second animation on same object removes css properties

javascript

css

animation