CSS新特性@starting-style：让页面元素初次加载就有动画效果

摘要：在网页设计中，给元素添加入场动画能让用户体验更加流畅。传统方法需要写JavaScript代码来控制，现在有了CSS新特性@starting-style，一切都变得简单了。

在网页设计中，给元素添加入场动画能让用户体验更加流畅。传统方法需要写JavaScript代码来控制，现在有了CSS新特性@starting-style，一切都变得简单了。

什么是@starting-style？

简单来说，@starting-style是专门为过渡动画设计的"起点声明"。它告诉浏览器：当元素第一次出现在页面上时，请从这些初始样式开始，慢慢过渡到最终样式。

这个特性不需要像@keyframes那样定义复杂的动画关键帧，只需要在CSS中添加一小段代码，就能让元素在初次渲染时拥有平滑的动画效果。

传统方法的局限性

我们先看看传统的CSS过渡动画是怎么工作的：

<div class="box"></div>

<style>
.box {
  width: 100px;
  height: 100px;
  background: blue;
  opacity: 1;
  transition: opacity 1s;
}
</style>

这段代码看起来没问题，但实际上页面加载时蓝色方块会直接显示，没有任何动画效果。这是因为过渡动画需要样式发生变化才会触发，而元素第一次渲染时没有"变化前的状态"。

为了解决这个问题，我们通常需要写JavaScript代码：

<div class="box"></div>

<script>
// 等待一帧后添加类名触发动画
requestAnimationFrame(() => {
  document.querySelector('.box').classList.add('show')
})
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background: blue;
  opacity: 0;  /* 初始状态 */
  transition: opacity 1s;
}

.box.show {
  opacity: 1;  /* 最终状态 */
}
</style>

这种方法虽然能实现效果，但存在几个问题：

需要写额外的JavaScript代码
要处理DOM操作和时机控制
多个元素时需要管理很多类名
代码容易变得混乱难维护

使用@starting-style的简单方案

现在有了@starting-style，一切都变得简单了：

<div class="box"></div>

<style>
.box {
  width: 100px;
  height: 100px;
  background: blue;
  opacity: 1;
  transition: opacity 1s;
  
  @starting-style {
    opacity: 0;
  }
}
</style>

只需要在CSS中添加@starting-style块，定义元素的初始状态。当页面加载时，浏览器会自动让元素从透明状态渐变到不透明状态。

不需要JavaScript，不需要额外类名，所有动画都由浏览器原生处理。

实际应用示例

淡入效果

.element {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s, transform 0.5s;
  
  @starting-style {
    opacity: 0;
    transform: scale(0.8);
  }
}

从下方滑入

.card {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s ease-out;
  
  @starting-style {
    opacity: 0;
    transform: translateY(30px);
  }
}

旋转出现

.icon {
  opacity: 1;
  transform: rotate(0deg);
  transition: all 0.8s;
  
  @starting-style {
    opacity: 0;
    transform: rotate(-180deg);
  }
}

工作原理

浏览器渲染元素时，会按照这样的步骤处理@starting-style：

元素创建时，先应用@starting-style中定义的样式
立即切换到元素的正常样式
因为有transition属性，浏览器会自动生成平滑的过渡动画

这个过程只在元素第一次出现在页面上时触发，不会重复播放。

需要注意的问题

样式权重

@starting-style中的样式也遵循CSS权重规则。如果同一个属性被更高权重的样式覆盖，起始样式就不会生效。

.box {
  opacity: 1 !important;  /* 这会覆盖@starting-style */
  transition: opacity 1s;
  
  @starting-style {
    opacity: 0;  /* 这个样式不会生效 */
  }
}

建议保持选择器权重一致，避免与内联样式混用。

显示属性限制

@starting-style不支持display: none到display: block的过渡动画，因为浏览器不会对隐藏元素进行渲染。可以使用opacity或visibility来代替：

/* 这样可以 */
.element {
  opacity: 1;
  transition: opacity 0.5s;
  
  @starting-style {
    opacity: 0;
  }
}

/* 这样不行 */
.element {
  display: block;
  transition: display 0.5s;  /* display属性不能过渡 */
  
  @starting-style {
    display: none;
  }
}

浏览器兼容性

目前（2025年）的浏览器支持情况：

✅ Chrome/Edge：完全支持
✅ Safari：完全支持
⚠️ Firefox：实验性支持（需要开启标志）

如果浏览器不支持@starting-style，页面不会报错，只是没有动画效果，元素会直接显示。

与其他动画技术的对比

特性	@keyframes	@starting-style
用途	任意复杂动画	元素初次出现的简单动画
控制程度	高（可定义多个关键帧）	低（只有开始和结束状态）
触发时机	需要手动触发	元素首次渲染时自动触发
代码复杂度	相对复杂	非常简单易懂

实用技巧

组合多个过渡效果

.product-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  background: white;
  transition: all 0.5s ease-out;
  
  @starting-style {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    background: lightblue;
  }
}

延迟不同元素的动画

通过设置不同的过渡延迟，可以创建错落有致的入场效果：

.item:nth-child(1) {
  transition: all 0.5s ease-out 0.1s;
}

.item:nth-child(2) {
  transition: all 0.5s ease-out 0.2s;
}

.item:nth-child(3) {
  transition: all 0.5s ease-out 0.3s;
}

.item {
  opacity: 1;
  transform: translateX(0);
  
  @starting-style {
    opacity: 0;
    transform: translateX(-50px);
  }
}

与现代CSS特性结合

@starting-style可以与其他现代CSS特性一起使用：

.dialog {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  
  @starting-style {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }
}

总结

@starting-style是一个很有用的CSS新特性，它让元素入场动画的实现变得非常简单。不需要JavaScript，只需要几行CSS代码，就能让页面元素在初次出现时拥有平滑的过渡效果。

适合使用@starting-style的场景：

页面元素的淡入效果
卡片、列表项的入场动画
弹窗对话框的打开效果
任何需要初次展示动画的元素

如果需要复杂的多阶段动画，还是要使用@keyframes。但对于简单的入场效果，@starting-style提供了最简洁直接的解决方案。

随着浏览器支持的不断完善，这个特性将会成为网页开发中的常用工具，帮助开发者创建更加流畅的用户体验。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_13195