动画线性梯度兼容所有浏览器

.anim {
    animate: anim 4s linear infinite;
}
@keyframes anim {
    0%, 100% {background: linear-gradient(180deg, rgba(X,X,X,0.8) 0%, rgba(X,X,X,0) 100%);}
    30% {background: linear-gradient(180deg, rgba(X,X,X,0.8) 0%, rgba(X,X,X,0) 100%);}
    70% {background: linear-gradient(180deg, rgba(X,X,X,0.8) 0%, rgba(X,X,X,0) 100%);}
}

$(document).ready(function(){
    function Anim(){
        $('.anim').animate({
            background:'linear-gradient(180deg, rgba(X,X,X,0.8) 0%, rgba(X,X,X,0) 100%)'
        }, 1500)
        .animte({
            background:'linear-gradient(180deg, rgba(X,X,X,0.8) 0%, rgba(X,X,X,0) 100%)'
        }, 1500)
        .animate({
            background:'linear-gradient(180deg, rgba(X,X,X,0.8) 0%, rgba(X,X,X,0) 100%)'
        }, 1500, Anim);
    }
    Anim();
});

完全支持固定

根据你的网站，我明白了。你不需要使用linear-gradient，只需要添加一个选择器，并根据box-shadow改变你的所有动画。

---

例如

:

添加:before选择器并设置全尺寸(与父级.header相同)。你所有的动画调用insert到这个选择器。不要忘记设置top:-100%;为顶部阴影开始，z-index: -1;设置:before内容在.header内容之下。

.header:before {
    z-index: -1;
    content:"";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    animation: hac 4s linear infinite;
    -moz-animation: hac 4s linear infinite;
    -webkit-animation: hac 4s linear infinite;
}

框影动画示例:

blur-radius应该是50px像父高度(.header)

0%, 100% { box-shadow: 0 0 50px 0 rgba(255,81,93,0.8) }
30% { box-shadow: 0 0 50px 0 rgba(39,175,131,0.8) }
70% { box-shadow: 0 0 50px 0 rgba(199,130,207,0.8) }

---

And all together:

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    vertical-align: middle;
}
.header:before {
    z-index: -1;
    content:"";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    animation: hac 4s linear infinite;
    -moz-animation: hac 4s linear infinite;
    -webkit-animation: hac 4s linear infinite;
}
@-moz-keyframes hac {
    0%, 100% { box-shadow: 0 0 50px 0 rgba(255,81,93,0.8) }
    30% { box-shadow: 0 0 50px 0 rgba(39,175,131,0.8) }
    70% { box-shadow: 0 0 50px 0 rgba(199,130,207,0.8) }
}
@-webkit-keyframes hac {
    0%, 100% { box-shadow: 0 0 50px 0 rgba(255,81,93,0.8) }
    30% { box-shadow: 0 0 50px 0 rgba(39,175,131,0.8) }
    70% { box-shadow: 0 0 50px 0 rgba(199,130,207,0.8) }
}
@keyframes hac {
    0%, 100% { box-shadow: 0 0 50px 0 rgba(255,81,93,0.8) }
    30% { box-shadow: 0 0 50px 0 rgba(39,175,131,0.8) }
    70% { box-shadow: 0 0 50px 0 rgba(199,130,207,0.8) }
}

<div class="header"></div>

<

小提琴演示/strong>

#topBody{
    position: relative;
    z-index: 2;
    margin-top: 10px;
    width: 100%;
    height: 120px;
    background: -ms-linear-gradient(-45deg, black 0%, ghostwhite 5%, black 5%);
    background: -webkit-linear-gradient(-45deg, black 0%, ghostwhite 5%, black 5%);
    background: -moz-linear-gradient(-45deg, black 0%, ghostwhite 5%, black 5%);
    background: -o-linear-gradient(-45deg, black 0%, ghostwhite 5%, black 5%);
    border: none;
    box-shadow: 0px 5px 10px #696969, 0px -3px 10px #696969;
}
window.onload = function()
{
    var x = 0;
    var y = 5;
    var body = document.getElementById("topBody");
    var t = setInterval(move, 10);
    function move()
    {
        if(x==80)
        {
            clearInterval(t);
        }
        else 
        {
            x++;
            y++;
            body.style.background = "-ms-linear-gradient(-45deg, black "+x+"%, ghostwhite "+y+"%, black "+y+"%)";
            body.style.background = "-webkit-linear-gradient(-45deg, black "+x+"%, ghostwhite "+y+"%, black "+y+"%)";
            body.style.background = "-moz-linear-gradient(-45deg, black "+x+"%, ghostwhite "+y+"%, black "+y+"%)";
            body.style.background = "-o-linear-gradient(-45deg, black "+x+"%, ghostwhite "+y+"%, black "+y+"%)";

        }
    }
}