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