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

Question

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

我有两个班级：

anim-start：这会使进度条从0到70％ anim-end：这会使进度条变为100％，并删除边框

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

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

请看下面的小提琴：

＆＃13;

＆＃13;

  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);

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>