CSS中使用关键帧实现的display none和opacity动画不起作用。

14 浏览
0 Comments

CSS中使用关键帧实现的display none和opacity动画不起作用。

我有一个非常基础的HTML代码，目的是从display: none;过渡到display: block，同时将透明度从0过渡到1。

我使用的是Chrome浏览器，它首选使用-webkit前缀，并使用-webkit-keyframes过渡设置来实现动画。然而，它并没有工作，只是改变了display而没有淡入淡出效果。

我在JSFiddle上有一个链接。


    
        
        
                鼠标悬停在我上面...
                    你好！

0

3 答案

0 Comments

CSS中的display属性不能被动画化。可以尝试使用visibility属性来实现隐藏和显示的动画效果。使用visibility:hidden来隐藏元素，使用visibility:visible来显示元素。

虽然理论上display属性不能被动画化，但是实际上仍然可以通过切换display属性的值来实现隐藏和显示的动画效果。将display属性的值从none切换到block即可显示元素，将display属性的值从block切换到none即可隐藏元素。

但是需要注意的是，display属性本身并不支持动画效果，这一点可以在Mozilla开发者文档中找到相关说明。

虽然display属性不被设计为能够动画化，但是仍然可以通过一些方法来实现该效果。可以参考这个例子中的答案。

0
0 Comments

CSS中display:none和opacity动画不起作用的原因是display属性不可动画化。解决方法是将display属性从关键帧动画中移除。另外，可以使用transition过渡效果代替animation动画效果。以下是解决方法的代码示例：

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



  Hover on me...
  
Hello!

这样修改后的代码可以实现鼠标悬停时myDiv元素的渐变显示效果。使用transition属性可以取代animation属性，同时移除了display属性，从而解决了display:none和opacity动画不起作用的问题。

0
0 Comments

问题的原因是CSS的display属性不能与transition或animation一起使用。解决方法是使用opacity、visibility或z-index属性，并将它们组合起来。可以尝试使用visibility:visible替代display:block，以及visibility:hidden替代display:none。最后，可以结合使用z-index:-1和z-index:100等属性。需要注意的是，z-index属性只适用于定位元素，如果需要使用它，还需要添加position:relative属性。

0