Animate linear-gradient compatible with all browsers

Question

I'm trying to do a "linear-gradient" animation wich is compatible with all browsers but no luck.

first i try using 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%);}

}

but this code only work for browsers like chrome, safari, edge... but not on firefox.

I read on some forums that this type of animations not work for firefox, the i try with 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();

});

But no luck, this one not working anywhere.

PS: I try as well using "-moz-linear-gradient" or "-webkit-linear-gradient"

Answer 1

Full support fixed

base on your website I'm figure it out. You don't need to use linear-gradient, just add one more selector and change your all animation base on box-shadow.

For example:

Add :before selector and set full size (like the parent - .header). Your all animation calling insert to this selector to. Don't forget to top:-100%; for top shadowing start and z-index: -1; that set the :before content under the .header content.

.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 animation example:

blur-radius should be 50px like the parent height (.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>

Fiddle demo

Animate linear-gradient compatible with all browsers

Full support fixed

Sign up