Question

我正在尝试做一个与所有浏览器兼容的“线性渐变”动画，但没有运气。

首先我尝试使用css

.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%);}
}

但此代码仅适用于chrome，safari，edge等浏览器，但不适用于firefox。

我在一些论坛上看到这种类型的动画不适用于firefox，我尝试使用jquery

$(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();
});

但没有运气，这个不能在任何地方工作。

PS：我也尝试使用“-moz-linear-gradient”或“-webkit-linear-gradient”

Answer 1

完全支持已修复

根据您的网站我想出来了。您不需要使用linear-gradient，只需添加一个选择器并在box-shadow上更改所有动画基础。

例如：

添加:before选择器并设置完整尺寸（如父 - .header）。您的所有动画调用插入此选择器。不要忘记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 <{1}}

.header

一起：

＆＃13;

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) }

＆＃13;

.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) }
}

＆＃13;

<强> Fiddle demo

Answer 2

如果出现此问题，css渐变动画和过渡仅适用于IE。通过javascript找到解决方案。它的作用：在页面加载时动画显示渐变的移动。

#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+"%)";


        }
    }
}

与所有浏览器兼容的Animate线性渐变

2 个答案:

完全支持已修复