当我们想使用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
输出: