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

Adding second animation on same object removes css properties

本文关键字：动画 删除 css 属性 第二个 添加 对象      更新时间：2023-09-26

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

我有两个班：

anim-start：这使进度条从0变为70%
anim-end：这使进度条达到100%，并且他们删除了边界

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

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

请看下面的小提琴：

  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>

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

  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>

相关文章：