CODEWITHSUNDEEP
css
user2541522
user2541522

Reputation: 73

How to change the CSS of Background Element?

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;
}

How to Change GREY to white

Cheers.

Upvotes: 0

Views: 67

Answers (2)

Vel S
Vel S

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

Kacper
Kacper

Reputation: 111

Javascript Solution

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>

CSS Solution

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

Related Questions