我有一个非常基本的 HTML 片段，其目的是从display: none; to display: block不透明度从 0 变为 1。
我使用的是 Chrome 浏览器，它使用-webkit前缀作为偏好并做了-webkit-keyframes设置过渡以使动画成为可能。然而，它不起作用，只是改变了display不褪色。
我有一个 JSFiddlehere http://jsfiddle.net/5g4yLcym/.
<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>
The display不适用于 CSS 过渡或动画。
Use opacity, visibility or z-index。您可以将它们全部组合起来。
尝试使用visibility: visible到位display: block and visibility: hidden到位display: none.
最后，结合z-index: -1 and z-index: 100例如。
干得好；）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
