CSS显示无和不透明度动画与关键帧不工作 [英] CSS display none and opacity animation with keyframes not working

查看：291
本文介绍了CSS显示无和不透明度动画与关键帧不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个非常基本的HTML，目的是从 display：none; 到 display：block

我使用Chrome浏览器，它使用 -webkit 前缀作为首选项，并且设置了一个 -webkit-keyframes 转换，以使动画成为可能。但是，它不工作，只是改变显示没有衰落。



我有一个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> 
悬停在我... 
< div id =myDiv> 
你好！ 
< / div> 
< / div> 
< / body> 
< / head> 
< / html>


解决方案

如果您使用 @关键帧，应使用 -webkit-animation 而不是 -webkit-transition 。以下是 @keyframes 动画的文档： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations 。



请参阅下面的代码段：



  .parent {background-color：＃000; color：#fff; width：500px; height：500px; padding：5px;}。myDiv {display：none;不透明度：0; padding：5px;颜色：＃600; background-color：#cec;}。parent：hover .myDiv {display：block;不透明度：1; / *both告诉浏览器在动画结束时使用上述不透明度（最佳实践）* / -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>悬停在我上面< div class =myDiv> Hello！< / div>< / div>   
 
 
 
 
 
 2016 UPDATED ANSWER 
 
 
 
我会使用过渡而不是动画。这是更新的代码：
 
 
 
 
 
 
  .parent {background-color：＃000; color：#fff; width：500px; height：500px; padding：5px;}。myDiv {opacity：0; padding：5px;颜色：＃600; background-color：#cec; -webkit-transition：opacity 1s; transition：opacity 1s;}。parent：hover .myDiv {opacity：1;}  
 
 < div class =parent>悬停在我上面< div class =myDiv> Hello！< / div>< / div>   
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>



 解决方案 
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>








                        
这篇关于CSS显示无和不透明度动画与关键帧不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

                        
                    

                    

                        查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆