一个让我怀疑人生的渐变动画需求
2019年,设计师丢给我一个设计稿,里面有一个“流光溢彩”的卡片背景——颜色从蓝色到紫色平滑过渡,周而复始,像个呼吸的光环。
“没问题,”我心想,“不就是transition吗?”
结果写了才发现,CSS根本不支持直接对background-image做动画。渐变在浏览器眼里是一个字符串,不是两个数字。从蓝色渐变到紫色?浏览器只会硬生生地从渐变A跳变到渐变B,中间没有任何过渡。那个效果说实话,你看着觉得像换了个背景,而不是在动态变化。
后来我尝试用JS通过每帧修改渐变方向来模拟,性能差,代码臃肿。设计师不太满意。
直到2024年,我看到一篇文章,说CSS可以通过@property注册自定义属性和类型,从而实现渐变的平滑过渡动画。这下就像是等了5年的“官方补丁”终于来了——我终于可以用最简单的方式搞定渐变动画,而且不需要JS。
本文我们就围绕@property这个话题,写一个从源头认识@property到渐变动画实战的完整过程,中间还会穿插一些使用心得和踩坑经历。
我建议大家在电脑端阅读——也可以在CodePen里跟着跑一遍,体验会更好。
第1章:关于@property,那些你不知道的事儿
故事还要从2020年开始说起。