为什么过渡属性不适用于显示属性？

当我们想使用display:none到display:block 的过渡时，过渡属性不起作用。这样做的原因是display:none属性用于删除块，而display:block属性用于显示块。块不能部分显示。要么可用，要么不可用。这就是 transition 属性不起作用的原因。

所以对于动画，我们使用关键帧CSS。

@keyframes animationname {keyframes-selector {css-styles;}}

关键帧有什么作用？
@keyframes 规则指定动画的代码。当一组 CSS 样式更改为另一组 CSS 样式时，动画会在样式更改时创建并指定。它可以是百分比，也可以是关键字“from”和“to”，相当于 0% 和 100%。这里 0% 是动画的开始，100% 是动画的结束。

哪个浏览器支持关键帧以及该浏览器的前缀是什么？

• Chrome & safari=> -webkit-
• Mozilla => -moz-
• 歌剧 => -o-

代码片段：

HTML

  

    

  

    
Hover me
    
Hello

  

输出：