Reputation: 73
On this page, I have a few of my elements under the video set to fade in after 15s with CSS.
The problem is that, until the elements fade in, the background below the video is Grey.
How can I change the GREY background to white (or #F3F8FC really) until my elements are finished fading? I can't seem to find the right CSS selector to change it. Here's the CSS I'm using - need to figure out how to change the color of what's behind the elements being hidden:
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.enroll {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.enroll {
-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
animation-delay: 15s;
}
Cheers.
Upvotes: 0
Views: 67
Reputation: 1
To remove the bg, you would do like this for the col-3cm layout for example:
.col-3cm .main,
.col-3cm .main-inner
{
background: none;
}
Upvotes: 0
Reputation: 111
You can use javascript instead of CSS.
function fadeIn(){
//code to fadeIn...
}
And in HTML you add on element
<div id="bg" onload="setTimeout('fadeIn()', 15000)"></div>
You can use background:(here goes attributes, for example color);
.
Here's example:
background:white;
Try this:
@keyframes fadeIn { from { opacity:0;background:(color-1); } to { opacity:1;background:(color-2); } }
Upvotes: 1