CSS不显示关键帧不工作的不透明动画
Posted
技术标签:
【中文标题】CSS不显示关键帧不工作的不透明动画【英文标题】：CSS display none and opacity animation with keyframes not working 【发布时间】：2014-12-23 19:09:51 【问题描述】：我有一段非常基本的 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>
【问题讨论】：
【参考方案1】：如果您使用@keyframes，则应使用-webkit-animation 而不是-webkit-transition。这是@keyframes动画的文档：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations。
参见下面的代码 sn-p：
.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>【讨论】：
显示属性不可设置动画。您可以将其从关键帧动画中删除，结果相同。 这拯救了我的一天...我正在使用过渡和@keyframes，这是我的问题...谢谢！【参考方案2】：您不能为display 属性设置动画。你可以试试visibility: hidden到visibility: visible
【讨论】：
不，您可以使用 display 属性来做到这一点：通过在display:none; 和 display:block; 之间切换。
不，你不能，显示属性不是动画developer.mozilla.org/en-US/docs/Web/CSS/display
理论上不应该这样做，但你可以做到，见the answer in this exmaple。【参考方案3】：
display 不适用于 CSS 过渡或动画。
使用opacity、visibility 或z-index。您可以将它们全部组合起来。
尝试使用visibility: visible 代替display: block 和visibility: hidden 代替display: none。
最后，例如结合z-index: -1 和z-index: 100。
干得好;)
【讨论】：
别忘了z-index只适用于定位元素；如果需要，请使用position:relative。【参考方案4】：
这个例子怎么样：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;
【讨论】：
【参考方案5】：您可以使用 javascript 来更改显示属性和动画。您不能在@keyframes 中显示。
从元素 display:none 开始。然后同时添加display:block 和animation:* 类。
Here's a working example 带有动画输入/输出。
【讨论】：
【参考方案6】：只需使用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;
【讨论】：
【参考方案7】：添加这个 css ;
.fade:not(.show)
opacity: 1;
这对我有用..
【讨论】：
【参考方案8】：这很棘手，很糟糕，但它是……
先淡出（不透明度） 然后真正隐藏（意思是：不掩盖或捕捉任何点击，得到height: 0，...）
display: <whatever> 确实是别无选择。
但动画scaleY 是。或translate 到遥远的或古老的经典：动画max-height（从特定的高像素值）到0px…
对于此 sn-p 的早期版本，其中包含有关“类切换时来回动画”的一些更一般信息（并在初始页面加载时阻止该动画look here。
const div = document.querySelector('.target')
function toggleTarget()
div.classList.add('active');
div.classList.toggle('play');
/* REF https://***.com/a/49575979 */
/* REF https://***.com/questions/26607330/css-display-none-and-opacity-animation-with-keyframes-not-working/64857102#64857102 */
body, html /* eye candy */
background: #444; display: flex; min-height: 100vh; align-items: center; justify-content: center;
button font-size: 4em; border-radius: 20px; margin-left: 60px;
div /* eye candy */
width: 200px; height: 100px; border-radius: 20px;
background: green; display: flex; align-items: center; justify-content: center;
font-family: sans-serif; font-size: 2em; color: white; text-align: center;
text-shadow: 0px 2px 4px rgba(0,0,0,.6);
/* using this extra .active class prevents that there is an animation already on loading */
.active
animation: fadeAndHideBack 1s linear forwards;
.play
opacity: 0;
/* learning curve: setting background "awaits" animation finish,
setting scale prematurely jumps to it, then doing animation from there */
animation: fadeAndHide 1s linear forwards;
@keyframes fadeAndHide
0% opacity: 1;
99.9% opacity: 0; max-height: 100px;
100% opacity: 0; max-height: 0;
@keyframes fadeAndHideBack
0% opacity: 0; max-height: 0;
0.1% opacity: 0; max-height: 100px;
100% opacity: 1;
<div class="target"></div>
<button onclick="toggleTarget()">
Toggle
</button>【讨论】：
【参考方案9】：您不能为 display 属性设置动画。您可以为 visibility 属性设置动画。但是 visibility 与 display 不同，因为它不会从 DOM 中完全移除 div 元素（属性，visibility:collapse，如果元素是表格，则可以从 DOM 中删除元素。这是一个例外）。您可以改为动画 CSS 属性 height 和 width。例如，下面的代码将动画方形块。
function myAnimation()
var square= document.getElementById('square');
if(square.getAttribute("class")==='square')
square.classList.add('animation');
else
square.classList.remove('animation');
.square
background-color:blue;
transform: translate(0, 0);
width: 100px;
height: 100px;
opacity: 1;
transition: all 0.5s ease-out;
.square.animation
transform: translate(-260px, -260px);
width: 0;
height: 0;
opacity: 0;
transition: all 0.5s ease-in;
<html>
<body>
<div class="square" id="square"></div>
<br/>
<button onclick="myAnimation()">Animate</button>
</body>
</html>仅供参考，我使用 CSS 过渡来为 div 设置动画。希望这很有用。
【讨论】：
以上是关于CSS不显示关键帧不工作的不透明动画的主要内容，如果未能解决你的问题，请参考以下文章