CSS @starting-style at-rule是什么？如何使用它实现元素初始状态动画？

CSS的@starting-style是一条全新的at-rule规则，它的核心作用是定义元素在首次被渲染到页面之前的初始样式，解决传统CSS中元素初始状态无法参与过渡或动画的问题，让元素的入场效果更加连贯自然。

@starting-style的基本语法

@starting-style规则需要放在目标元素的样式规则内部，用来声明该元素在首次渲染前的样式属性，语法结构如下：

/* 目标元素的基础样式 */
.target-element {
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 1;
  transform: translateY(0);

  /* 定义元素的初始样式 */
  @starting-style {
    opacity: 0;
    transform: translateY(20px);
  }
}

当这个元素首次被添加到页面时，浏览器会先应用@starting-style中定义的样式，然后再过渡到元素基础样式中声明的属性值，从而实现平滑的入场动画效果。

@starting-style的核心使用场景

1. 元素入场过渡动画

传统实现元素入场动画时，往往需要借助JavaScript先给元素添加初始类，再移除类触发过渡，而使用@starting-style可以纯CSS实现这个效果，代码如下：

/* 入场卡片样式 */
.entry-card {
  width: 300px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  /* 定义过渡属性 */
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* 最终渲染的样式 */
  opacity: 1;
  transform: translateY(0) scale(1);

  @starting-style {
    /* 初始样式：透明、下移20px、缩小到0.9倍 */
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
}

当.entry-card元素首次被插入到DOM中时，会自动从透明、下移、缩小的状态过渡到正常的显示状态，不需要额外的JavaScript逻辑。

2. 动态切换状态的初始过渡

对于通过display属性切换显示状态的元素，@starting-style也能让隐藏到显示的过渡更自然，示例代码如下：

/* 可切换显示的弹窗 */
.toggle-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  padding: 30px;
  background: #fff;
  border-radius: 12px;
  transition: opacity 0.3s ease, transform 0.3s ease;

  /* 显示时的样式 */
  &[data-visible="true"] {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);

    @starting-style {
      /* 显示前的初始样式 */
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.8);
    }
  }
}

当给弹窗元素添加data-visible="true"属性时，它会从透明、缩小的状态过渡到正常显示的状态，避免了突然出现导致的突兀感。

注意事项与兼容性

• @starting-style中定义的属性必须和目标元素基础样式中的属性存在对应关系，否则无法触发过渡效果。
• 该规则仅对元素首次渲染到页面的场景生效，元素后续的状态切换不会再次触发@starting-style中的样式。
• 目前@starting-style已经在Chrome 119+、Edge 119+、Firefox 121+版本中得到支持，Safari也在后续版本中逐步适配，使用前建议确认目标用户的浏览器版本。

如果需要在不支持该规则的浏览器中保持兼容，可以添加降级处理，当@starting-style不生效时，元素会直接显示基础样式，不会影响功能正常使用。

CSS@starting-styleat-rule元素动画初始样式修改时间：2026-06-23 11:30:35