Css3 code to fade in drop down menu.

Question

In case anyone is interested here is the css3 code i'm using to fade in drop down menus in a Joomla template. Works in Safari, I.E (10+), Firefox and Chrome. As long as the class is the same i imagine it will work in Wordpress and Drupal as well though I could be wrong. I find a 1 second (1s) delay works for me but of course it can be changed to suit. Cut and paste into the 'general-Css' in TT. Hope it's usefull.

 

/************Main menu animation, fade in from opacity 0-1 over 1 second*******/

ul.navbar-nav .dropdown-menu

 {

   animation-name: fadein ;
   animation-duration: 1s;

  -moz-animation-name: fadein; /* Firefox < 16 */
   -moz-animation-duration: 1s; /* Firefox < 16 */

   -webkit-animation: fadein ; /* Safari, Chrome and Opera > 12.1 */
   -webkit-animation-duration: 1s;/* Safari, Chrome and Opera > 12.1 *
   
   -ms-animation-name: fadein ; /* Internet Explorer */
   -ms-animation-duration: 1s; /* Internet Explorer */
   
   -o-animation-name: fadein; /* Opera < 12.1 */
   -o-animation-duration: 1s; /* Opera < 12.1 */
  
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/*******************end fade in animation*******************/

Answer 1

Hello,

Thanks for the information which you have shared with us.We appreciate you for doing this kind of work.

Comments

Thanks James, I will add to this over time if thats OK? Could we have a section of the forum for useful code perhaps?

---

Its OK, you can share  your codes in General Discussion, that would be helpful to other users as well.