Hero Section CSS 动画¶

概述¶

Hero section 使用纯 CSS 动画实现，无 JavaScript 依赖，确保最高性能。动画简洁优雅，仅用于首屏入场效果。

动画效果¶

1. 内容淡入向上 (Fade In Up)¶

Hero 中的标题、副标题和按钮的入场动画。

属性:

动画: fadeInUp
持续时间: 0.8s (桌面) / 0.6s (移动)
缓动: ease-out
初始状态: 向下 30px + 透明
级联延迟:
h1 标题：0s
p 副标题：0.1s
按钮容器：0.2s

CSS:

.fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

2. 滚动指示器弹跳 (Scroll Bounce)¶

页面底部的向下箭头连续弹跳动画。

属性:

动画: scrollBounce
持续时间: 2s
缓动: ease-in-out
重复: infinite
效果: 箭头上下浮动，逐渐减弱

实现细节¶

文件结构¶

assets/scss/components/
└── _hero-animations.scss       # 所有 Hero 动画定义

无 JavaScript¶

纯 CSS 实现，完全不需要 JavaScript，避免了：

DOM 查询开销
事件监听开销
重排重绘触发

性能特点¶

✅ 使用 will-change 优化渲染
✅ 使用 transform 和 opacity (GPU 加速)
✅ 避免 width, height, left, right 等导致重排的属性
✅ 完全由浏览器加速处理

自定义¶

修改持续时间¶

编辑 assets/scss/components/_hero-animations.scss:

.fade-in-up {
  animation: fadeInUp 1.0s ease-out forwards; // 改为 1.0s
}

修改缓动函数¶

// 更快速
animation: fadeInUp 0.6s ease-in forwards;

// 更弹性
animation: fadeInUp 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

修改初始偏移¶

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px); // 改为 50px
  }
}

修改级联延迟¶

在 HTML 中修改 animation-delay:

<h1 class="hero-title fade-in-up" style="animation-delay: 0s;">
<p class="hero-subtitle fade-in-up" style="animation-delay: 0.15s;">
<div class="hero-cta-buttons fade-in-up" style="animation-delay: 0.3s;">

无障碍支持¶

自动尊重用户的动画偏好设置：

@media (prefers-reduced-motion: reduce) {
  .fade-in-up,
  .scroll-arrow {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

如果用户在系统设置中启用了"减少动作"，所有动画自动禁用。

浏览器兼容性¶

✅ Chrome/Edge 26+
✅ Firefox 16+
✅ Safari 9+
✅ iOS Safari 9+
✅ Android Chrome (现代版本)

所有属性使用标准 CSS 动画，无需前缀。

性能对比¶

纯 CSS vs JavaScript¶

方案	性能	复杂性	文件大小
纯 CSS	✅ 最优	低	很小
JS + Scroll	❌ 较差	高	大

建议: 始终使用纯 CSS 动画处理简单的入场效果。