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>Source (Stackoverflow)