Javascript 脉动或闪烁进度条

如何为进度条创建“脉动”或“闪烁”效果？

我不想在bootstrap中使用“active”类型的条带化进度条，但每当我调用ajax来检查状态时，我都想“pulstate”或使进度条发光。我以前见过这种效果，但我不知道它叫什么，也不知道如何寻找它。基本上，它从左侧开始，使颜色稍微浅一点（或者是alpha叠加？），在结束时得到颜色，然后恢复正常

很多描述，但我不知道该怎么说。如果我能找到一个例子，我可能不需要问这个问题

---

下面是我的代码的引导：

多亏了@DCDaz，这就是我想到的。老实说，这不是100%，但已经足够接近了：

html

请参阅

另外，有点接近我要做的，就是用不同的颜色复制div。此js将导致复制的div滑入，而其他div滑出，请稍等片刻，然后使用相同的“幻灯片”动画还原：

function pulse(totalMs) {
    //totalMS is the total milliseconds this should take
    quarter = totalMs / 4;
    half = totalMs / 2
    threeTen = totalMs * 3 / 10
    twoTen  = totalMs * 2 / 10

    showTwo(half);
    setInterval(function () {
        showOne(twoTen)
    }, threeTen);
}




function showOne(ms) {
    $('#two').hide("slide", {
        direction: "right"
    }, ms);
    $('#one').show("slide", {
        direction: "left"
    }, ms);
}

function showTwo(ms) {
    $('#one').hide("slide", {
        direction: "right"
    }, ms);
    $('#two').show("slide", {
        direction: "left"
    }, ms);
}


$('#myButton').click(function () {
    pulse(750);
});

---

结帐。

您参考的文章具有脉动环效应。除了“脉动”这个词，我的问题没有任何共同之处。嗨，杰夫，这篇文章概述了如何实现效果的基础知识，您只需稍微更改css，这是相同的方法。您基本上希望使用边框制作关键帧动画，而不是完全相同的构建，只需将大小方面替换为边框。我以前从未听说过关键帧。。。所以基本上，我可以用alpha做一个“from”颜色和一个“to”颜色，然后直接回到我原来的颜色。我认为对于老的浏览器没有解决方案。是的，伙计。是的，你对以前的浏览器做了一点修改，但是自从IE9发布以来已经6年了，现在大多数人都得到了强制的浏览器更新，除了少数几个仍然在xp上的浏览器更新，这不会太长了，现在你可以用jquery版本来代替@DCdaz，这更接近于我想要做的。

/* CSS used here will be applied after bootstrap.css */
.progress-bar{
 background:  rgb(255, 215, 109);
    -webkit-animation-name: pulse; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite;
    animation-name: pulse;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}


@-webkit-keyframes pulse {
    0%   {background: rgb(255, 215, 109);}
    25%   {background: rgb(255, 215, 109);}
    50%   {background: rgb(255, 215, 109);}
    75%  {background: rgb(255, 231, 167);}
    85%{background: rgb(255, 215, 109);}
    100% {background: rgb(255, 215, 109);}
}

@keyframes pulse {
    0%   {background: rgb(255, 215, 109);}
    25%   {background: rgb(255, 215, 109);}
    50%   {background: rgb(255, 215, 109);}
    75%  {background: rgb(255, 231, 167);}
    85%{background: rgb(255, 215, 109);}
    100% {background: rgb(255, 215, 109);}
}

function pulse(totalMs) {
    //totalMS is the total milliseconds this should take
    quarter = totalMs / 4;
    half = totalMs / 2
    threeTen = totalMs * 3 / 10
    twoTen  = totalMs * 2 / 10

    showTwo(half);
    setInterval(function () {
        showOne(twoTen)
    }, threeTen);
}




function showOne(ms) {
    $('#two').hide("slide", {
        direction: "right"
    }, ms);
    $('#one').show("slide", {
        direction: "left"
    }, ms);
}

function showTwo(ms) {
    $('#one').hide("slide", {
        direction: "right"
    }, ms);
    $('#two').show("slide", {
        direction: "left"
    }, ms);
}


$('#myButton').click(function () {
    pulse(750);
});