How to show a notification bar on Top after n seconds with transition from top to down?

Question

In lot of mobile sites, I see notification appear with animation from top to down after some seconds. Currently, I don't remember the sites. I was able to find how to show top notification, but unable to find how to animate this using CSS 3 transition or javscript/jquery. Here is the link which I found, http://www.red-team-design.com/cool-notification-messages-with-css3-jquery

Answer 1

This is how I solve the issue,

 /* JAVA SCRIPT */ setTimeout(function () { $('.notify-bar').show().addClass('notify-bar-height-change'); },2000) 

 /* CSS : */ .notify-bar{ background-size: 40px 40px; background-image: linear-gradient( 135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); width: 100%; border: 1px solid; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5); background-color: #4ea5cd; border-color: #3b8eb5; padding: 5px; } .notify-bar-height { height: 0; -webkit-transition: height 0.5s ease; -moz-transition: height 0.5s ease; -o-transition: height 0.5s ease; -ms-transition: height 0.5s ease; transition: height 0.5s ease; } .notify-bar-height-change { height: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="notify-bar notify-bar-height" style="display: none"> Intall ABC! </div> 

Answer 2

if you are using the jquery mobile lib you can use $('#some_selector').slideDown(2000). hope this helps.

similar question