Robert Sinclair Robert Sinclair - 2 months ago 8
HTML Question

Make notification bar slide up from the bottom

I have a small horizontal notification bar that slides up from the bottom of the page.

It comes up fine, but when you open up the page it quickly flashes, then disappears and then slides up.

How do I modify it so it doesn't appear/disappear before the transition takes place?

CSS:

#notificationBarBottom {
position: fixed;
z-index: 101;
bottom: 0;
left: 0;
right: 0;
background: #5cb85c;
color: #ffffff;
text-align: center;
line-height: 2.5;
overflow: hidden;
-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
}

@-webkit-keyframes slideDown {
0%, 100% { -webkit-transform: translateY(0px); }
10%, 90% { -webkit-transform: translateY(510px); }
}

@-moz-keyframes slideDown {
0%, 100% { -moz-transform: translateY(0px); }
10%, 90% { -moz-transform: translateY(510px); }
}

.cssanimations.csstransforms #notificationBarBottom {
-webkit-transform: translateY(510px);
-webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
-moz-transform: translateY(510px);
-moz-animation: slideDown 2.5s 1.0s 1 ease forwards;
}


HTML

<div id="notificationBarBottom">Hello, human!</div>


Jsfiddle demo here: https://jsfiddle.net/cnfk36jd/ (but unfortunately the problem is not visible there). Here's the page where you can see the "flickering" http://www.whycall.me/bannerTest.html

I tried the advice here: https://css-tricks.com/pop-from-top-notification/ and tweaked the translateY values quite a bit, but it doesn't help, not sure what else to do.

Thank you for your help

Answer

The elements initial position is visible, and then, during page load, the first translate kicks in to hide it, hence it flickers.

Do like this, where you place it below the bottom, bottom: -510px;, and then slide it up.

Updated fiddle: https://jsfiddle.net/cnfk36jd/1/

#notificationBarBottom {
    position: fixed;
    z-index: 101;
    bottom: -510px;
    left: 0;
    right: 0;
    background: #5cb85c;
    color: #ffffff
    text-align: center;
    line-height: 2.5;
    overflow: hidden;
    box-shadow:         0 0 5px black;
}
@keyframes slideDown {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-510px); }
}
#notificationBarBottom {
    animation: slideDown 2.5s ease forwards;
}
#close {
  display: none;
}
<div id="notificationBarBottom">Hello, human!</div>

Side note: I temporary removed the prefixed properties, so you need to add them back