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

Question

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

我有两个类(class):

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

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

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

请看下面的 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>