El Tito Barte El Tito Barte - 1 month ago 6
CSS Question

Animate linear-gradient compatible with all browsers

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

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

Comments