pro pro - 20 days ago 7
CSS Question

Display block few seconds after page load

I have a certain div that holds buttons at the bottom of my page. Above the div is a form with fields for user data.

<div>
<form>
<input >
<input >
<input >
</form>
<div>
<div class="buttons-div">
<button>ADD</button>
<button>Cancel</button>
<div>


The problem is when the page loads, there is a delay in loading the form and the div holding the buttons loads first and the user can see it in the middle of the page for a few seconds. After the form is loaded, the div with the buttons assumes its proper place, at the bottom of the page.

I have tried to use ng-cloak as it is an angular app and place the .ng-cloak classes in my stylesheet. But none of that is working.

I tried to use

div.buttons-div {
text-align: center;
animation: fadein 11s;
}

@keyframes fadein {
from { opacity: 0;}
to { display: block;}
}


But I still don't think that is ideal. Instead of the fading effect, I would like to have it hidden for 10 seconds and just pop (display block). Replacing the opacity:0 above with display:none is not working. Is there a pure CSS solution for this?

Answer

Change your css to this to this:

div.action-bar-bottom { 
    opacity: 0; 
    text-align: center; 
    animation: fadein 1s; 
    animation-delay:10s; 
    -webkit-animation-fill-mode: forwards; 
    -moz-animation-fill-mode: forwards; 
    -ms-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
} 
@keyframes fadein { 
    from { opacity: 0; } // Update because you asked for this numbers BUT i propose from 0 otherwise you are instantly seeing the div.
    to { opacity: 1;} 
}
    
<div class="buttons-div">My div</div>

As you can see you have to use http://www.w3schools.com/csSref/css3_pr_animation-delay.asp the animation-delay instead of only the duration which is the animation: fadein in your case.