CSS动画-淡入和淡出

Question

I'm trying to do some animations on a menu in CSS. Below is the code I have to get the menu to fade in when I hover over the heading. I've also added similar CSS rules for fading out but I can't get it to work the way I want.

Tried a few things but the best I could do was getting it to fade in and then as soon as it is at full opacity it fades out again till the end of the animation and then just displays the block, so it basically fades ina and then out before just appearing as if there was no animation.

 ul{ list-style:none; padding:0px; margin:0px; } ul >li >ul{ display:none; } ul >li:hover >ul{ display:block; } .fade_in { -webkit-animation-name: fade_in; -webkit-animation-duration: 1s; animation-name: fade_in; animation-duration: 1s; } @-webkit-keyframes fade_in { from {opacity: 0} to {opacity: 1} } @keyframes fade_in { from {opacity: 0} to {opacity: 1} } .fade_out { -webkit-animation-name: fade_in; -webkit-animation-duration: 1s; animation-name: fade_in; animation-duration: 1s; } @-webkit-keyframes fade_out { from {opacity: 1} to {opacity: 0} } @keyframes fade_out { from {opacity: 1} to {opacity: 0} } 

 <ul> <li>Heading <ul class="fade_in"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </li> </ul> 

Answer 1

What you want to achieve is by far easier using a CSS transition instead of an animation , like so:

transition: opacity .4s ease-in-out;

Because you can neither animate nor transition the display property, I've changed the default state from display: none; to opacity: 0; .

 ul { list-style: none; padding: 0; margin: 0; } ul>li>ul { opacity: 0; position: absolute; pointer-events: none; transition: opacity .4s ease-in-out; } ul>li:hover>ul { pointer-events: all; opacity: 1; } 

 <ul> <li>Heading <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </li> </ul> 

Answer 2

you could try something like this

HTML

<div>Heading
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
</div>

CSS

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

div>ul {
    opacity: 0;
    position: absolute;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s 1s, opacity 1s linear;
    overflow: hidden;
}

div:hover>ul {
    pointer-events: all;
    visibility: visible;
    opacity: 1;
    transition: opacity 1s linear;
}