Question

我有一个非常基本的HTML，其目标是从display: none;动画到display: block，不透明度从0变为1.

我正在使用Chrome浏览器，它使用-webkit前缀作为首选项，并设置-webkit-keyframes转换设置以使动画成为可能。但是，它不起作用，只是更改display而不淡化。

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

Answer 1

display不适用于CSS转换或动画。

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

尝试使用visibility: visible到位display: block和visibility: hidden到位display: none。

最后，例如，将z-index: -1和z-index: 100结合起来。

干得好;）

Answer 2

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

请参阅下面的代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

2016更新答案

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您无法为display属性设置动画。您可以尝试visibility: hidden到visibility: visible

Answer 4

只需使用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;
  }
}

Answer 5

添加此CSS；

.fade:not(.show) {
    opacity: 1;
}

这对我有用。

Answer 6

您可以使用Javascript更改显示属性和动画。您无法在@keyframes中显示。

从元素display:none开始。然后同时添加display:block和animation:*类。

Here's a working example动画输入/输出。

Answer 7

这很棘手，很讨厌，但这是...

先淡出（不透明）
然后真正隐藏（意味着：不掩盖或抓住任何点击，获得psql postgresql://postgresadmin:pass1234@127.0.0.1:5432/postgresdb?sslmode=disable postgresdb=# CREATE ROLE postgres LOGIN SUPERUSER PASSWORD 'somepassword123';，...）
- psql -U postgres -W -f dumpall.sql确实是没有选择。
- 但动画height: 0是。或display: <whatever>到遥远的地方或古老的经典：将scaleY（从特定的高px值）动画到0px…

有关此代码段的早期版本，其中包含有关“类切换时来回动画”（以及在初始页面加载look here时阻止该动画）的更多常规信息。

translate

max-height

const div = document.querySelector('.target')

function toggleTarget() {
  div.classList.add('active');
  div.classList.toggle('play');
}

Answer 8

这个例子怎么样：jsfiddle 问题是需要使用动画而不是使用关键帧进行过渡

@-webkit-keyframes fadeAnimation {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}
#myDiv {
    opacity: 0;
    padding: 5px;
    color: #600;
    background-color: #CEC;
}
#parent {
    background-color: #000;
    color: #FFF;
    width: 500px;
    height: 500px;
    padding: 5px;
}
#parent:hover #myDiv {
    -webkit-animation: fadeAnimation 6s;
}

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

8 个答案:

2016更新答案

这很棘手，很讨厌，但这是...