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

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一段非常基本的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>

回答：

如果您正在使用@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>

回答：

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

.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不显示任何动画，并且关键帧不透明 的全部内容， 来源链接： utcz.com/qa/402773.html

回到顶部