可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have a very basic piece of HTML with the objective of animating from display: none; to display: block with opacity changing from 0 to 1.

I'm using Chrome browser, which uses the -webkit prefixes as preference and did a -webkit-keyframes transition set to make the animation possible. However, it does not work and just changes the display without fading.

I have a JSFiddle here.

<html>
    <head>
        <style type="text/css">
            #myDiv
                {
                display: none;
                opacity: 0;
                padding: 5px;
                color: #600;
                background-color: #CEC;
                -webkit-transition: 350ms display-none-transition;
                }

            #parent:hover>#myDiv
                {
                opacity: 1;
                display: block;
                }

            #parent
                {
                background-color: #000;
                color: #FFF;
                width: 500px;
                height: 500px;
                padding: 5px;
                }

            @-webkit-keyframes display-none-transition
                {
                0% {
                    display: none; 
                    opacity: 0;
                    }

                1% 
                    {
                    display: block; 
                    opacity: 0;
                    }

                100% 
                    {
                    display: block; 
                    opacity: 1;
                    }
                }
        </style>
        <body>
            <div id="parent">
                Hover on me...
                <div id="myDiv">
                    Hello!
                </div>
            </div>
        </body>
    </head>
</html>

回答1:

If you are using @keyframes you should use -webkit-animation instead of -webkit-transition. Here is the doc for @keyframes animation: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations.

See code snippet below:

.parent {
  background-color: #000;
  color: #fff;
  width: 500px;
  height: 500px;
  padding: 5px;
}
.myDiv {
  display: none;
  opacity: 0;
  padding: 5px;
  color: #600;
  background-color: #cec;
}
.parent:hover .myDiv {
  display: block;
  opacity: 1;
  /* "both" tells the browser to use the above opacity
  at the end of the animation (best practice) */
  -webkit-animation: display-none-transition 1s both;
  animation: display-none-transition 1s both;
}
@-webkit-keyframes display-none-transition {
  0% {
    opacity: 0;
  }
}
@keyframes display-none-transition {
  0% {
    opacity: 0;
  }
}

<div class="parent">
  Hover on me...
  <div class="myDiv">Hello!</div>
</div>

2016 UPDATED ANSWER

To reflect today's best practices, I would use a transition instead of an animation. Here is the updated code:

.parent {
  background-color: #000;
  color: #fff;
  width: 500px;
  height: 500px;
  padding: 5px;
}
.myDiv {
  opacity: 0;
  padding: 5px;
  color: #600;
  background-color: #cec;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
.parent:hover .myDiv {
  opacity: 1;
}

<div class="parent">
  Hover on me...
  <div class="myDiv">Hello!</div>
</div>

回答2:

The display doesn't work with CSS transition or animation.

Use opacity, visibility or z-index. You can combine all them.

Try to use visibility: visible in place display: block and visibility: hidden in place display: none.

And finally, combine z-index: -1 and z-index: 100 for example.

Good work ;)

回答3:

You can not animate display property. You can try with visibility: hidden to visibility: visible

回答4:

You can use Javascript to change both the display properties and animation. You can't put display in @keyframes.

Start with the element display:none. Then simultaneously add display:block and animation:* classes.

Here's a working example with animation in/out.

回答5:

Just use position: fixed and drop the z-index: -5 at the end of the @keyframe animation (you can do any negative index....

CSS:

@keyframes fadeOut {
  0% { opacity: 1

  }
  99% {
    opacity: 0;
    z-index: 1;
  }
  100%{
    opacity: 0;
    display:none;
    position: fixed;
    z-index: -5;
  }
}

回答6:

How about this example: jsfiddle The issue was needing to use an animation rather than transition with keyframes

@-webkit-keyframes fadeAnimation {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}
#myDiv {
    opacity: 0;
    padding: 5px;
    color: #600;
    background-color: #CEC;
}
#parent {
    background-color: #000;
    color: #FFF;
    width: 500px;
    height: 500px;
    padding: 5px;
}
#parent:hover #myDiv {
    -webkit-animation: fadeAnimation 6s;
}