Question

我有两个div，我希望将它们像条形统计一样使用，其中每个条形具有200px的{{1}}。

我要在栏内为width制作动画，仅一次，以增加宽度和背景色。

div

我想将第一个小节增加到150像素（基本上，将动画限制到@keyframes first { 0% {background-color: green; width: 0%} 33% {background-color: yellow; width: 33%} 66% {background-color: orange; width: 66%} 100% {background-color: red; width: 100%} }并同时阻止背景色动画）。 CSS或jQuery是否可能？

在这种情况下，我们希望在步骤 75％

处停止播放动画

我创建了一个JSFiddle： https://jsfiddle.net/gefz5wtL/3/

Answer 1

一个想法是通过添加/删除类来使用JS运行和暂停动画：

check ((DateOfBirth is null and age is null) or (DateOfBirth is not null and age is not null))

$('#first').addClass('first-start');
setTimeout(function() {
  $('#first').addClass('first-pause');
}, 1500);

#page {
  margin-top: 50px;
  width: 300px;
  height: 200px;
  background-color: #000;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#box-first,
#box-second {
  width: 200px;
  height: 50px;
  background-color: #fff;
  border-radius: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
}

@keyframes first {
  0% {
    background-color: green;
    width: 0%
  }
  33% {
    background-color: yellow;
    width: 33%
  }
  66% {
    background-color: orange;
    width: 66%
  }
  100% {
    background-color: red;
    width: 100%
  }
}

@keyframes second {
  0% {
    background-color: green;
    width: 0%
  }
  33% {
    background-color: yellow;
    width: 33%
  }
  66% {
    background-color: orange;
    width: 66%
  }
  100% {
    background-color: red;
    width: 100%
  }
}

#first {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background-color: #fff;
}

.first-start {
  animation: first 2s infinite;
}

.first-pause {
  animation-play-state: paused;
}

#second {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background-color: #fff;
  animation: second 2s infinite;
}

Answer 2

您可以使用animation-fill-mode：前进，animation-iteration-count：1；它看起来像这样：

WHERE

HAVING

是否可以通过步骤阻止关键帧动画？

2 个答案: