CSS显示无和关键帧不起作用的不透明度动画

Question

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 26

这display不适用于CSS转换或动画.

使用opacity,visibility或z-index.你可以把它们结合起来.

尝试使用visibility: visible到位display: block,并visibility: hidden在适当位置display: none.

最后,结合起来z-index: -1,z-index: 100例如.

干得好;)

Answer 2

Pip*_*ipo 17

如果您正在使用@keyframes,则应使用-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;
  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;
  }
}

Run Code Online (Sandbox Code Playgroud)

<div class="parent">
  Hover on me...
  <div class="myDiv">Hello!</div>
</div>

Run Code Online (Sandbox Code Playgroud)

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;
}

Run Code Online (Sandbox Code Playgroud)

<div class="parent">
  Hover on me...
  <div class="myDiv">Hello!</div>
</div>

Run Code Online (Sandbox Code Playgroud)

显示属性不可动画.您可以使用相同的结果将其从关键帧动画中删除. (3认同)

Answer 3

Sal*_*oui 8

你不能动画display属性.您可以尝试visibility: hidden到visibility: visible

不,你不能,显示属性不可动画https://developer.mozilla.org/en-US/docs/Web/CSS/display (2认同)

Answer 4

Zle*_*erp 5

只需在动画结束时使用position: fixed并删除即可（您可以执行任何负索引....z-index: -5@keyframe

CSS：

@keyframes fadeOut {
  0% { opacity: 1

  }
  99% {
    opacity: 0;
    z-index: 1;
  }
  100%{
    opacity: 0;
    display:none;
    position: fixed;
    z-index: -5;
  }
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，12 月前
查看次数：	61359 次
最近记录：	6 年，11 月前