CSS动画如何平滑处理属性值的突变？-css教程-PHP中文网

css background-image 无法直接动画，因其是非可动画属性；需用 @property 声明可插值长度变量（syntax: "" 且 initial-value 匹配），或在 firefox 中以 font-size 回退。

css动画如何平滑处理属性值的突变？

直接对 background-image 里的数值（比如 radial-gradient(#000 12px, #fff 1px) 中的 12px）做动画，浏览器根本不会插值——它只会跳变。这不是写法错，而是 CSS 动画引擎压根不解析渐变字符串里的长度。

为什么 background-image 不能直接动画

因为 background-image 是非可动画属性（non-animatable property），它的值是字符串，不是数值。即使你写了 @keyframes { 0% { background-image: radial-gradient(#000 20px, #fff 1px); } 100% { background-image: radial-gradient(#000 2px, #fff 1px); } }，浏览器也不会在中间帧计算 10px、6px 这样的过渡值，而是直接切到终点。

所有渐变函数内部的、、都无法被自动识别为可插值项
transition 对 background-image 完全无效，连“进”都不会动
用 all 或 background 简写也救不了，底层机制不支持

@property 声明可插值的自定义变量

真正能解的路只有一条：把要变的尺寸抽出来，用 @property 显式告诉浏览器“这是个长度，可以插值”。

必须写 syntax: "<length>"</length>，否则变量会被当普通字符串处理，动画退化为跳变
initial-value 要和关键帧里首帧值一致，否则首帧会先闪一下再开始动画
推荐终值避开 0px，设成 0.7px 或 0.5px，Firefox 和 Safari 对 0px 渲染不稳定

示例：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@property --r {
  syntax: "<length>";
  initial-value: 10px;
  inherits: false;
}
<p>.circle {
background-image: radial-gradient(#000 var(--r), transparent 1px);
animation: shrink 1.5s ease-in-out forwards;
}</p>
<p>@keyframes shrink {
0% { --r: 10px; }
100% { --r: 0.7px; }
}</p></length>

Firefox 兼容方案：用 font-size 模拟

Firefox 目前（截至 128 版）仍不支持 @property。别硬扛，用 font-size 回退——它是天然可动画的长度单位，且兼容性拉满。

把 --r 替换为 font-size，再用 em 单位写进渐变：radial-gradient(#000 calc(1em * 0.8), transparent 1px)
用 @supports not (@property: --r) 包裹回退规则，避免覆盖现代浏览器逻辑
注意重置 font-size 不影响文本——给容器加 font-size: 0，再在伪元素或子元素里显式设文字大小

transition 和 @keyframes 的 easing 别混用

很多人在 .el { transition: all 0.4s ease-out; } 里写了缓动，结果加了 @keyframes 后动画还是生硬。问题出在：@keyframes 内部每一段插值默认走 ease，它会覆盖你在 transition 里写的节奏。

如果用 animation，就在 @keyframes 里每个关键帧之间加 animation-timing-function，或用 cubic-bezier() 显式声明
如果只是 hover 触发状态切换，就别碰 @keyframes，老实用 transition + transform/opacity
慎用 width/height 过渡：触发 layout，卡顿明显；优先选 transform: scale() 或 max-height（配具体数值）