怎样在SCSS中动态生成CSS动画的关键帧keyframes代码-css教程-PHP中文网

根本原因是CSS标准要求@keyframes名称必须是静态字符串，浏览器解析时需确定名称，不支持编译期变量插值；正确做法是将循环封装进@mixin内再@include调用。

怎样在scss中动态生成css动画的关键帧keyframes代码

为什么不能在SCSS顶层用@for或@each生成@keyframes

直接写@for $i from 1 through 3 { @keyframes slide-#{$i} { ... } }会编译失败，报错类似Invalid CSS after "@keyframes slide-": expected identifier, was "#{$i}"。根本原因不是 Sass 限制严，而是 CSS 标准本身要求@keyframes名称必须是静态字符串——浏览器解析时就要能确定名称，不能依赖运行时或编译期变量插值。

所有试图在顶层（即不在@mixin内）拼接名称的行为都会失败，包括@each、@while、甚至%placeholder里写@keyframes也会语法报错。

正确做法：把循环封装进@mixin再@include调用

只有@mixin内部的#{$name}插值才被 SCSS 允许展开为合法的关键帧名。每次@include调用，都会生成一组独立、静态、可预测的@keyframes规则。

示例：批量生成不同位移距离的滑入动画

@mixin generate-slide-animations($count: 3) {
  @for $i from 1 through $count {
    $dist: $i * 100px;
    @keyframes slide-in-#{$i} {
      0% { transform: translateX(-#{$dist}); opacity: 0; }
      100% { transform: translateX(0); opacity: 1; }
    }
  }
}
@include generate-slide-animations(4);

这会输出@keyframes slide-in-1到slide-in-4四组规则。注意：

$dist必须在@for体内定义，否则会被最后一次迭代覆盖
必须显式@include调用，只声明@mixin不会产出任何 CSS
若需控制缓动或时长，应把它们也作为@mixin参数传入，而非硬编码

语义化命名优于数字编号：用@each代替@for

当动画有明确业务含义（如加载态），用@each更易读、可维护，也避免数字编号带来的歧义。

例如定义骨架屏三种速度档位：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

@each $name, $duration in (slow: 2.2s, medium: 1.6s, fast: 1s) {
  @keyframes skeleton-shine-#{$name} {
    0% { background-position: -200% 50%; }
    100% { background-position: 200% 50%; }
  }
  .skeleton-shine-#{$name} {
    animation: skeleton-shine-#{$name} $duration ease-in-out infinite;
  }
}

关键点：

动画名如skeleton-shine-slow比skeleton-shine-1更直观
背景位移值必须展开为静态数值，不能用calc()或var(--x)
重复引入同一段@each代码会导致关键帧重复输出，体积膨胀

真正可复用的动画库结构：分离定义与调用

动态生成只是手段，不是目的。长期维护的项目应放弃“每个调用都生成新关键帧”的思路，改用固定名+参数化@mixin的分层结构。

在_animations.scss中：

@keyframes my-fade-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@mixin fade-in($duration: 0.3s, $easing: ease-out, $fill: forwards) {
  animation: my-fade-in $duration $easing $fill;
}

调用时只需@include fade-in(0.4s, cubic-bezier(0.2, 0.8, 0.4, 1));。这样做的好处：