你也可以访问以下链接查看实际效果(Chrome 117+)
四、总结一下
一个可以改变元素初始状态的新特性,你学到了吗?
transition 需要有状态的改变才能触发过渡效果
animation 无需状态改变,因为可以自动运行
@starting-style 可以改变元素的初始状态,让元素在初次渲染时也有过渡效果
@starting-style 可以在元素添加时直接添加过渡效果
@starting-style 可以让 display:none 也支持过渡
不过像这样的 CSS 特性注定是冷门属性,主要是可替代性太强了,而且不知道什么时候才可以正式投入使用,现在就当提前了解吧。最后,如果觉得还不错,对你有帮助的话,欢迎点赞、收藏、转发 ❤❤❤
[0] css3元素出现动画实例: https://segmentfault.com/a/1190000018889396
[1]CSS @style-rule (juejin.cn): https://code.juejin.cn/pen/7299436237318799423
[2]CSS @style-rule (codepen.io): https://codepen.io/xboxyan/pen/ZEwKYpR
[3]CSS @style-rule display (juejin.cn): https://code.juejin.cn/pen/7299479246152400896
[4]CSS @style-rule display (codepen.io): https://code.juejin.cn/pen/7299479246152400896