Html CSS 显示无和不透明动画，关键帧不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26607330/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS display none and opacity animation with keyframes not working
提问by user3476093
I have a very basic piece of HTML with the objective of animating from display: none;to display: blockwith opacity changing from 0 to 1.
我有HTML与目标动画的一个非常基本的片从display: none;到display: block不透明度变化的从0到1。
I'm using Chrome browser, which uses the -webkitprefixes as preference and did a -webkit-keyframestransition set to make the animation possible. However, it does not work and just changes the displaywithout fading.
我正在使用 Chrome 浏览器，它使用-webkit前缀作为首选项，并进行了-webkit-keyframes过渡设置以使动画成为可能。但是，它不起作用，只是改变display而不褪色。
I have a JSFiddle here.
我这里有一个 JSFiddle 。
<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>
回答by Cezar Luiz
The displaydoesn't work with CSS transition or animation.
在display不与CSS过渡或动画作品。
Use opacity, visibilityor z-index. You can combine all them.
使用opacity,visibility或z-index。您可以将所有这些组合起来。
Try to use visibility: visiblein place display: blockand visibility: hiddenin place display: none.
尽量visibility: visible就地display: block和visibility: hidden就地使用display: none。
And finally, combine z-index: -1and z-index: 100for example.
最后，结合z-index: -1和z-index: 100例如。
Good work ;)
干得好;)
回答by Pipo
If you are using @keyframesyou should use -webkit-animationinstead of -webkit-transition. Here is the doc for @keyframesanimation: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations.
如果您正在使用@keyframes，则应使用-webkit-animation而不是-webkit-transition. 这是@keyframes动画文档：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
2016 更新答案
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>回答by Salmen Bejaoui
You can not animate displayproperty. You can try with visibility: hiddento visibility: visible
您不能为display属性设置动画。您可以尝试visibility: hidden到visibility: visible
回答by Zlerp
Just use position: fixedand drop the z-index: -5at the end of the @keyframeanimation (you can do any negative index....
只需在动画结束时使用position: fixed并删除即可（您可以执行任何负索引....z-index: -5@keyframe
CSS:
CSS：
@keyframes fadeOut {
0% { opacity: 1
}
99% {
opacity: 0;
z-index: 1;
}
100%{
opacity: 0;
display:none;
position: fixed;
z-index: -5;
}
}
回答by sweeds
You can use Javascript to change both the display properties and animation. You can't put display in @keyframes.
您可以使用 Javascript 来更改显示属性和动画。你不能把显示放在@keyframes.
Start with the element display:none. Then simultaneously add display:blockand animation:*classes.
从元素开始display:none。然后同时添加display:block和animation:*类。
Here's a working examplewith animation in/out.
回答by Nugraha Kurniawan
add this css ;
添加这个css；
.fade:not(.show) {
opacity: 1;
}
this work for me..
这对我来说工作..
回答by svnm
How about this example: jsfiddleThe issue was needing to use an animation rather than transition with keyframes
这个例子怎么样：jsfiddle问题是需要使用动画而不是关键帧的过渡
@-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;
}
