继续 CSS 动画循环

Question

我有一个动画进度条，我使用

animation-iteration-count

CSS 属性来指定百分比进度。因此，如果进度应该是 50%，我设置

animation-iteration-count: 0.5

。在页面加载时，效果很好，进度条从 0% 动画到 50%。

但是如何更改进度条值并继续 CSS 动画循环到新值？更大或更小的值。当我使用 JavaScript 动态更改

animation-iteration-count

值时，动画会跳转到该新值。我希望从一个值平滑过渡到下一个值。

如果我只想对宽度进行动画处理，我可以使用 CSS 过渡并且没有任何问题。但因为我也想改变进度条相对于 CSS 动画进度的颜色，所以要容易得多。

我尝试过尝试

animation-play-state

，但没有运气，但也许我只是做得不对。我还尝试过使用

@container

查询来更改进度的背景颜色，然后使用 CSS 过渡来调整宽度，但这也不可行。

在下面的代码片段中你可以看到我的进度条，点击按钮增加

animation-iteration-count

属性的值就可以看到它跳跃了。

const progressBar = document.querySelector(".progress-bar");
const button = document.querySelector("button");
button.addEventListener("click", (e) => {
 progressBar.style.animationIterationCount = "0.75";
})

.progress-bar-container {
    width: 500px;
    outline: 1px solid black;
}

.progress-bar {
    height: 10px;
    animation: progressBarAnimation 2s linear forwards;
}


@keyframes progressBarAnimation {
    0% {
        background-color: red;
        width: 0;
    }
    30% {
        background-color: yellow;
        width: 30%;
    }
    60% {
        background-color: green;
        width: 60%;
    }
    100% {
        background-color: blue;
        width: 100%;
    }
}

<div class="progress-bar-container">
    <div class="progress-bar" style="animation-iteration-count: 0.5">
    </div>
</div>
<button>Increase progress</button>

谢谢你帮助我！

问候， 杰普

Answer 1

animation-iteration-count

不是用于停止/启动动画的属性。

通过css设置将重新启动动画。

您可能最好创建一个常规进度条，该进度条将使用

width

来动画增长。然后使用

:before

元素根据您的喜好应用

gradient

。

const progressBar = document.querySelector(".progress-bar");
const button = document.querySelector("button");

button.addEventListener("click", (e) => {
 progressBar.style.width = "75%";
 //progressBar.style.animation = 'progressBarAnimation 1s linear forwards';
})

.progress-bar-container {
    width: 500px;
    outline: 1px solid black;
    position: relative;
    background: white;
}

.progress-bar {
    height: 10px;
    width: 50%;
    transition: width 1s ease-in-out;
    -webkit-mask:linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0);
}

.progress-bar:before {
content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: linear-gradient(90deg, rgba(255,0,0,1) 25%, rgba(247,255,0,1) 50%, rgba(0,255,19,1) 80%, rgba(1,0,255,1) 99%);
}

<div class="progress-bar-container">
    <div class="progress-bar" style="animation-iteration-count: 0.5">


    </div>
</div>
<button>Increase progress</button>