CSS3动画过渡：透明度无法工作

Question

我正在使用CSS3制作一个下拉菜单的动画，但遇到了一些问题。我需要使用CSS3而不是jQuery或JavaScript。我已经添加了所有必要的规则，但效果仍然没有出现。请问有谁可以帮忙吗？以下是我的代码fiddle链接。谢谢。

http://jsfiddle.net/Zmr7u/6/

   html code:                 
                    <header class="main-header">
    <nav class="main-nav">
        <ul class="top-nav">
            <li>
                <a href="#">home</a>
                <ul class="drop-down">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">about</a>
                <ul class="drop-down">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">products</a>
                <ul class="drop-down">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">contacts</a>
                <ul class="drop-down">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header>


         css code:

                                nav.main-nav {
background: #333;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f); 
background-image:    -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image:     -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image:      -o-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image:      linear-gradient(top, #2f2f2f, #4f4f4f);
width: 100%;
 }

 .top-nav {
border-bottom: 2px solid #111;
height: 30px;
list-style-type: none;
margin: 0;
padding-left: 0;
width: 100%;
 }

 .top-nav li {
background: #333;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f); 
background-image:    -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image:     -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image:      -o-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image:      linear-gradient(top, #2f2f2f, #4f4f4f);
border-bottom: 2px solid #111;
border-right: 1px solid #555;
float: left;
font-size: 14px;
height: 20px;
padding-top: 10px;
position: relative;
text-align: center;
width: 150px;
 }

 .top-nav li ul.drop-down {
position: absolute;
top: 32px;
left: 0;
visibility: hidden;
display: none;
opacity: 0;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
  }

 .top-nav li:hover ul.drop-down {
visibility: visible;
opacity: 1;
display: block;
 }

 .top-nav li .drop-down li {
height: 20px;
-webkit-transition: height 0.3s ease;
-moz-transition: height 0.3s ease;
-o-transition: height 0.3s ease;
transition: height 0.3s ease;
  }

.top-nav li .drop-down li:hover {
height: 30px;
 }

 .top-nav li a {
color: #aaa;
padding-top: 5px;
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 25px;
text-decoration: none;
 }

- Vladimir

Answer 1

你可以直接使用visibility属性而不用使用display属性：

.top-nav li ul.drop-down {
    list-style-type: none;
    position: absolute;
    top: 32px;
    left: -40px;
    visibility: hidden; 
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.top-nav li:hover ul.drop-down {    
    visibility: visible;
    opacity: 1; 
}

演示。

- King King

---

所以说是显示器导致它无法工作，对吗？为什么会这样？ - display-name-is-missing

是的，更确切地说，“display:none”会使“opacity”无法过渡/动画。这可能是CSS设计的原因。 - King King

抱歉打扰了，但有没有办法在使用display的同时仍然工作？比如过渡显示0.5秒？如果我不使用display:none，我的边距就会变得混乱。 - Danielr

@Danielr 我认为你不能这样使用 display，你必须通过不使用 display:none 来解决你的问题，我相信这是完全可能的。我猜想你可能对元素的 position 使用了错误的值。无论如何，如果你仍然想使用 display:none，你必须找到一个解决方法来不使用 transition 来动画化你的元素，例如使用 animation。在下面的演示中（从我的答案中发布的原始演示进行了修改），我声明了一个名为 fade-in 的 keyframes，你可以查看它以了解解决方法 http://jsfiddle.net/gtpo0xfd/ - King King

Answer 2

您可以在想要增加不透明度并使元素可见时使用CSS动画，例如：--

span {
   display: none;
   opacity: 0;
}

使标签可见

span {
  display: block;
  animation: visible 2s;   
}

@keyframes visible {
 from {
   opacity: 0;
 }
 to {
   opacity: 1;
 }
}

如果你在动画时间小于1秒时遇到了错误，那么请使用 animation: visible 0.5s forwards;

。这将使动画保持可见状态直到结束。请注意保留HTML标签。

- Piyush

---

对于任何好奇为什么“forward”有效的人-> https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode另一种实现这一点的方法是在“span”上设置“opacity:1”。 - Fillip Peyton