CSS3 动画过渡：不透明度不起作用

Posted 2023-03-06

【中文标题】CSS3 动画过渡：不透明度不起作用

【英文标题】：CSS3 animation transition: opacity not working

【发布时间】：2014-06-28 04:18:04

【问题描述】：

我在使用 css3 为下拉菜单设置动画时遇到了一些问题。我需要它与 css3 而不是 jQuery 或 javascript 一起工作。我已经添加了所有必要的规则，但效果仍然没有发生。有人可以帮忙吗？这是我的代码的小提琴。谢谢。

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;
 

【参考方案1】：

当你想增加不透明度并使元素可见时，你可以使用 css 动画，比如 --

span 
   display: none;
   opacity: 0;

使span 可见

span 
  display: block;
  animation: visible 2s;   


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

如果您在制作少于 1 秒的动画时遇到错误，请使用 animation: visible 0.5s forwards;

【讨论】：

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

【参考方案2】：

你可以只使用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; 

Demo.

【讨论】：

所以display 是什么让它无法工作，对吧？这是为什么呢？

@DanielLisik 是的，更确切地说，display:none 将使opacity 无法转换/动画。这可能是 CSS 的设计造成的。

嘿，很抱歉恢复，但是有什么方法可以使用显示并且仍然有效？像过渡显示0.5s？如果我不使用 display:none 我的边距会变得混乱。

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