1. 首页
  2. 问题
  3. CSS不显示任何动画，并且关键帧不透明
小编典典

CSS不显示任何动画，并且关键帧不透明

css

我有一段非常基本的HTML，其目的是使动画从display: none;变为display: block不透明，从0变为1。

我使用的是Chrome浏览器，该浏览器使用-webkit前缀作为首选项，并进行了-webkit- keyframes过渡设置以使动画成为可能。但是，它不起作用，只是在display不褪色的情况下进行了更改。

我有一个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>

阅读 442

收藏
2020-05-16

共1个答案

小编典典

如果您正在使用@keyframes，则应使用-webkit-animation而不是-webkit- transition。

请参见下面的代码段：

.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年更新的答案

为了反映当今的最佳做法，我将使用过渡而不是动画。这是更新的代码：

.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>
2020-05-16