如何利用Less制作CSS动画的关键帧_封装带参数的keyframes宏-css教程-PHP中文网

less中@keyframes必须声明在顶层且名称静态，嵌套会编译失败；需用~"@{name}"转义动态命名；mixin仅封装动画应用逻辑，关键帧应集中于独立文件并@import (once)引入。

如何利用less制作css动画的关键帧_封装带参数的keyframes宏

Less里不能在Mixin里直接写@keyframes

会编译失败或静默丢弃。Less把@keyframes当作顶层指令处理，一旦嵌套在.mixin()内部、或包裹在选择器里，编译器就无法识别其语法结构——不是“不支持”，而是作用域模型根本不允许。

常见错误现象：

.button { @keyframes hover-bounce { ... } } → 编译报错或输出空内容
.animate() { @keyframes @{name} { ... } } → @{name}不解析，甚至触发ParseError: Unexpected token

正确做法是：所有@keyframes必须放在文件最外层（即不在任何{}块内），且名称必须是静态标识符，比如@keyframes bounce-in，不能是@keyframes @{prefix}-in。

用~"@{name}"拼接动画名并确保全局唯一

想让不同组件的动画名带上下文前缀（如card-slide、input-pulse），又不想硬编码，就得靠字符串插值+转义。直接写@keyframes @{prefix}-slide会报错，因为Less试图把它当变量运算；必须用~"@{prefix}-slide"强制按字面量输出。

使用要点：

前缀变量建议统一定义在文件顶部：@prefix: card;
关键帧声明和调用必须用同一变量，否则名字对不上：@keyframes ~"@{prefix}-slide" { ... } + animation: ~"@{prefix}-slide" 0.3s;
避免前缀含非法字符（空格、/、括号等），否则~""也无法挽救

注意：大小写敏感。如果@keyframes CardSlide，那animation: ~"cardslide"不会触发。

用Mixin封装动画绑定逻辑，但别在里面塞@keyframes

真正该封装的是「怎么用动画」，而不是「怎么声明动画」。一个安全的.animate() Mixin只负责设置animation相关属性，并显式补全animation-fill-mode: forwards（这个常被简写漏掉）。

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

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

下载

推荐写法示例：

.animate(@name, @duration: 0.3s, @easing: ease, @count: 1) {
  animation-name: @name;
  animation-duration: @duration;
  animation-timing-function: @easing;
  animation-iteration-count: @count;
  animation-fill-mode: forwards;
  -webkit-animation-name: @name;
  -webkit-animation-duration: @duration;
  -webkit-animation-timing-function: @easing;
  -webkit-animation-iteration-count: @count;
  -webkit-animation-fill-mode: forwards;
}

调用时：.card { .animate(~"@{prefix}-slide", 0.4s); }

为什么这么做？因为：