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

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

box-shadow 动画示例：

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

---

一起来：

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

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


        }
    }
}