用@keyframes定义可复用边框动画需将关键帧置于顶层且名称静态，如@keyframes border-pulse；通过Mixin封装动画参数并显式设置animation-fill-mode: forwards；禁止在Mixin内声明@keyframes，多文件共用时应集中定义并@import引入。
如何用 @keyframes 定义可复用的边框动画帧
Less 本身不执行动画，但能帮你把 CSS @keyframes 写得更干净、易维护。关键不是“生成动画”，而是避免重复写相同帧序列——比如一圈旋转、呼吸缩放、虚线流动等常见边框动效。
直接在 Less 中定义 @keyframes 是安全的（编译后原样输出），但要注意：名称不能动态拼接，必须是静态标识符；动画体内部仍用标准 CSS 语法。
- ✅ 正确写法：
@keyframes border-pulse { 0% { box-shadow: 0 0 0 0 rgba(59,130,246,0.7); } 70% { box-shadow: 0 0 0 10px rgba(59,130,246,0); } 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); } } - ❌ 错误写法：
@keyframes ~"border-@{type}-pulse"—— Less 不允许变量插值进@keyframes名称 - ⚠️ 注意：若项目用 CSS-in-JS 或构建工具做了 keyframes 自动哈希（如 Next.js 的
styled-jsx），手写的@keyframes可能无法被识别，此时应改用 JS 驱动或内联animation
用 .border-animate() Mixin 统一控制动画参数
Mixin 是 Less 封装边框动画逻辑的核心——它把 animation 相关属性（名称、时长、函数、次数、方向）收拢成一个调用点，避免每个元素都写一长串。
下面这个 Mixin 支持传入动画名、持续时间、是否循环等，并自动补全兼容前缀：
.border-animate(@name, @duration: 2s, @timing: ease-in-out, @iteration: infinite, @direction: normal) {
animation-name: @name;
animation-duration: @duration;
animation-timing-function: @timing;
animation-iteration-count: @iteration;
animation-direction: @direction;
animation-fill-mode: forwards;
// 兼容旧版 WebKit
-webkit-animation-name: @name;
-webkit-animation-duration: @duration;
-webkit-animation-timing-function: @timing;
-webkit-animation-iteration-count: @iteration;
-webkit-animation-direction: @direction;
-webkit-animation-fill-mode: forwards;
}
- 调用示例：
.my-btn { .border-animate(border-pulse, 1.5s, ease, 1); } - ⚠️ 动画名
@name必须与前面定义的@keyframes名完全一致，大小写敏感 - 如果只想要 hover 触发，别忘了加
&:hover { .border-animate(...); }，Mixin 本身不带条件逻辑
为什么不要把 @keyframes 塞进 Mixin 里
有人试图把整个 @keyframes 块放进 Mixin，像这样：.gen-border-keyframes(@name) { @keyframes @name { ... } } —— 这会导致编译失败或不可预期行为。
- ❌ Less 不支持在 Mixin 内动态声明
@keyframes（语法报错或静默忽略） - ✅ 正确做法：
@keyframes单独定义在全局作用域（如animations.less），Mixin 只负责引用和配置 - ? 小技巧：用命名约定区分用途，例如
border-glow、border-dash-move、border-rotate，便于团队协作时快速定位 - ⚠️ 若多个组件共用同一动画但需不同颜色，别改
@keyframes，改用box-shadow或border-color在调用处覆盖（因为@keyframes里不能用变量）
实际使用时最容易漏掉的三件事
边框动画看似简单，但上线后常因细节缺失失效：
- 没设
border或outline基础样式——动画只是改变已有边框的属性，不会凭空“画”出边框 - 忘记加
animation-fill-mode: forwards，导致动画播完立刻回退，hover 离开时闪一下 - CSS 层叠顺序问题：如果父容器有
overflow: hidden，而动画靠box-shadow实现“发光边框”，可能被裁剪——此时得调高z-index或换用outline+outline-offset
复杂点在于：动画效果越炫，对渲染性能越敏感。纯 border-color 变化基本无负担，但涉及 box-shadow 扩散或 transform 位移时，在低端安卓机上容易掉帧。真要兼顾体验，得先测再上。
