Adding css animation on dropdown menu

  • Hi, is it possible to add animation to the main nav using the code below?
    Been trying to do it but I can’t seem to figure out how to target the menus.
    Thanks!

    li:hover > ul{
    display:block;
    -moz-animation: fadeIn .3s ease-in ;
    -webkit-animation: fadeIn .3s ease-in ;
    animation:fadeIn  .3s ease-in ;

}

ul li:hover > ul{
    display:block;
    -moz-animation: fadeIn .3s ease-in ;
    -webkit-animation: fadeIn .3s ease-in ;
    animation: fadeIn .3s ease-in;
}

    I can’t put a link because I am editing the site with a localhost.

Viewing 1 replies (of 1 total)

  • Assuming that you’re trying to add animation to child ul of on mouse hover over parent li of it, you can try following code. In this demo, when you over over li, child ul of li get fadeIn slowly. Please customize it according to your requirements. Like you can change time 0.5s to as you want.

    @keyframes fadeIn {
	0%   { opacity: 0; }
	100%   { opacity: 1; }
}

ul ul {
	opacity: 0;
	display: none;
	animation: fadeIn 0.5s;
}

ul li:hover > ul{
	  display: block;
	  opacity: 1;
}
Viewing 1 replies (of 1 total)
  • The topic ‘Adding css animation on dropdown menu’ is closed to new replies.