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