Javascript Css3基于计数器值的div渐变背景动画？

我的要求是根据递增的计数器值用动画更改div渐变背景

例如，假设div背景渐变在计数器==0处为蓝白色。 当计数器值在[80100]范围内时，div进入危险范围，因此假设背景渐变在动画中变为红白

我试了几次，但都做不好

---

有人能告诉我怎么做吗？

我想你可以提出一个适应性的解决方案。在本例中，我们正在移动：

FROM：背景图像：线性渐变（rgba（220，20，20，1）0，rgba（255，255，255，1））； 至：背景图像：线性渐变（rgba（20、120、220、1）0、rgba（255、255、255、1））

代码如下：

样式表

    *{
        padding: 0;
        margin: 0;
        background-color: transparent;
        background-image: none;
    }
    div{
        display: block;
        margin: 5px;
        width: 500px;
        height: 300px;
        border-radius: 5px;
        border: 1px rgba(220, 220, 220, 1) solid;
        box-shadow: 1px 3px 9px rgba(220, 220, 220, 1);
        background-image: linear-gradient(rgba(20, 120, 220, 1) 0, rgba(255, 255, 255, 1));
        transition-duration: .7s;
        -o-transition-duration: .7s;
        -moz-transition-duration: .7s;
        -webkit-transition-duration: .7s;
    }

HTML正文内容

<div data-index="0"></div>
<b>Counter : </b><output></output>
<script type="text/javascript" src="js/JQuery/jquery-2.1.1.js"></script>

---

你是强制需要一个计数器，还是仅仅为了让它保持转换/改变？听起来像是一个进度条……谷歌是你的朋友。请将您尝试过的代码包含在问题本身中，并解释如果（计数器>80）{更改css bg[rgb值+1以变为红色]），我认为rgb（220+1，0，0）会出现什么错误否则就反其道而行之；我今天打算添加JSFIDLE，但Salathiel Genèse的答案正是我想问的。哇，这是一个非常漂亮的解决方案。谢谢你。

    $(function() {
        var linearDefinition = 'linear-gradient(rgba(RED, BLUE, GREEN, 1) 0, rgba(255, 255, 255, 1))';
        setInterval(function() {
            var count = parseInt($('div').data('index'));
            count = (count === 100) ? 0 : count;
            var red = 20 + ((1 + count) * 2);
            var blue = 120 - count;
            var green = 220 - (2 * (1 + count));

            // Asume this is your couter instruction
            $('div').data('index', 1 + count);
            $('output').text($('div').data(('index')));
            $('div').css('background-image', linearDefinition.replace(/RED/, red).replace(/BLUE/, blue).replace(/GREEN/, green))
        }, 50);
    });