CSS：在@keyframes内嵌套媒体查询是否合法？生成代码能否生效？

是的，这些嵌套在@keyframes内部的媒体查询完全不符合CSS规范，浏览器会直接忽略它们，不会执行。

CSS规范明确规定，@keyframes规则的内部只能包含关键帧选择器（比如from/to、百分比值），不允许嵌套@media这类条件规则。浏览器在解析CSS时，一旦发现@keyframes里出现无效的嵌套结构，会直接跳过这部分代码，所以你生成的那些媒体查询里的样式根本不会生效。

如果你要实现响应式的动画效果，正确的做法是把媒体查询放在@keyframes外面，针对不同断点定义独立的动画，或者用CSS变量结合媒体查询来控制动画参数。

正确写法示例（Tailwind） #

方法1：断点处重定义动画

@layer components {
  /* 基础动画（小于sm断点） */
  @keyframes alt-pop-enter {
    from {
      @apply translate-y-2 opacity-0;
    }
    to {
      @apply translate-y-0 opacity-100;
    }
  }

  /* sm及以上断点的动画 */
  @media (min-width: 640px) {
    @keyframes alt-pop-enter {
      from {
        @apply translate-x-2 opacity-0;
      }
      to {
        @apply translate-x-0 opacity-100;
      }
    }
  }
}

方法2：用CSS变量控制动画参数

@layer components {
  :root {
    --enter-translate-y: 0.5rem;
    --enter-translate-x: 0;
  }

  @media (min-width: 640px) {
    :root {
      --enter-translate-y: 0;
      --enter-translate-x: 0.5rem;
    }
  }

  @keyframes alt-pop-enter {
    from {
      transform: translate(var(--enter-translate-x), var(--enter-translate-y));
      opacity: 0;
    }
    to {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
}

内容的提问来源于stack exchange，提问作者Kim Stacks