Back to Details

elite-css-animations

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Elite CSS Animations

高级CSS动画

Modern CSS animation capabilities - when JavaScript isn't needed.
现代CSS动画能力——无需JavaScript的场景

Quick Reference

快速参考

TopicReference File
Scroll-Driven APIscroll-driven-api.md
View Transitionsview-transitions.md
@property Ruleproperty-rule.md
Visual Effectsvisual-effects.md
主题参考文档
滚动驱动APIscroll-driven-api.md
视图过渡view-transitions.md
@property规则property-rule.md
视觉效果visual-effects.md

CSS vs GSAP Decision Guide

CSS与GSAP选择决策指南

Use CSS When:

优先使用CSS的场景：

  • Simple reveal/fade animations
  • Progress indicators tied to scroll
  • Hover/focus state transitions
  • Performance is paramount (off-main-thread)
  • Safari support isn't critical (for scroll-driven)
  • You want to minimize JavaScript
  • 简单的显示/淡入淡出动画
  • 与滚动关联的进度指示器
  • 悬停/聚焦状态过渡
  • 对性能要求极高（主线程外执行）
  • Safari支持不是必需的（针对滚动驱动动画）
  • 希望最小化JavaScript代码

Use GSAP When:

优先使用GSAP的场景：

  • Complex multi-element sequences
  • Pin/sticky behavior needed
  • Horizontal scrolling sections
  • Cross-browser consistency critical
  • Fine-grained control (scrub with snap)
  • Timeline orchestration
  • 复杂的多元素序列动画
  • 需要固定/粘性行为
  • 横向滚动区域
  • 跨浏览器一致性要求高
  • 精细的控制（带吸附的滚动scrub）
  • 时间线编排

Hybrid Approach

混合方案

CSS for simple interactions, GSAP for complex sequences:
css
/* CSS: Hover states, simple transitions */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
javascript
// GSAP: Complex scroll-driven sequences
gsap.timeline({
  scrollTrigger: { trigger: '.section', scrub: 1 }
})
.from('.title', { opacity: 0, y: 50 })
.from('.content', { opacity: 0 }, '-=0.3');
简单交互用CSS，复杂序列用GSAP：
css
/* CSS: 悬停状态、简单过渡 */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
javascript
// GSAP: 复杂的滚动驱动序列动画
gsap.timeline({
  scrollTrigger: { trigger: '.section', scrub: 1 }
})
.from('.title', { opacity: 0, y: 50 })
.from('.content', { opacity: 0 }, '-=0.3');

Browser Support (2026)

浏览器支持情况（2026年）

FeatureChromeFirefoxSafariEdge
Scroll-Driven Animations✓ 115+✓ 132+✗ (polyfill)✓ 115+
View Transitions✓ 111+✗✓ 18+✓ 111+
@property✓ 85+✓ 128+✓ 15.4+✓ 85+
clip-path animations✓✓✓✓
backdrop-filter✓✓✓✓
特性ChromeFirefoxSafariEdge
滚动驱动动画✓ 115+✓ 132+✗（需polyfill）✓ 115+
视图过渡✓ 111+✗✓ 18+✓ 111+
@property✓ 85+✓ 128+✓ 15.4+✓ 85+
clip-path动画✓✓✓✓
backdrop-filter✓✓✓✓

Scroll-Driven Animations Quick Start

滚动驱动动画快速上手

css
/* Progress bar that fills as you scroll */
.progress-bar {
  transform-origin: left;
  transform: scaleX(0);
  animation: progress linear;
  animation-timeline: scroll();
}

@keyframes progress {
  to { transform: scaleX(1); }
}
css
/* Element reveals as it enters viewport */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: fadeIn linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
css
/* 随滚动填充的进度条 */
.progress-bar {
  transform-origin: left;
  transform: scaleX(0);
  animation: progress linear;
  animation-timeline: scroll();
}

@keyframes progress {
  to { transform: scaleX(1); }
}
css
/* 元素进入视口时渐显 */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: fadeIn linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}

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

Safari Polyfill

Safari兼容补丁（Polyfill）

html
<script src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script>
See scroll-driven-api.md for complete patterns.
html
<script src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script>
完整模式请查看scroll-driven-api.md。

View Transitions Quick Start

视图过渡快速上手

javascript
// Simple page transition
document.startViewTransition(() => {
  // Update the DOM
  updateContent();
});
css
/* Customize the transition */
::view-transition-old(root) {
  animation: fade-out 0.3s ease-out;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease-in;
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
}
See view-transitions.md for SPA integration.
javascript
// 简单页面过渡
document.startViewTransition(() => {
  // 更新DOM
  updateContent();
});
css
/* 自定义过渡效果 */
::view-transition-old(root) {
  animation: fade-out 0.3s ease-out;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease-in;
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
}
SPA集成请查看view-transitions.md。

@property Quick Start

@property快速上手

Animate CSS custom properties that previously couldn't animate:
css
@property --progress {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

.progress-circle {
  --progress: 0;
  background: conic-gradient(
    var(--color-accent) calc(var(--progress) * 360deg),
    transparent 0
  );
  transition: --progress 1s ease-out;
}

.progress-circle.complete {
  --progress: 1;
}
See property-rule.md for gradient animations and more.
为原本无法动画的CSS自定义属性添加动画效果：
css
@property --progress {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

.progress-circle {
  --progress: 0;
  background: conic-gradient(
    var(--color-accent) calc(var(--progress) * 360deg),
    transparent 0
  );
  transition: --progress 1s ease-out;
}

.progress-circle.complete {
  --progress: 1;
}
渐变动画及更多内容请查看property-rule.md。

Visual Effects Quick Start

视觉效果快速上手

Clip-Path Reveal

Clip-Path渐显

css
.reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
  clip-path: inset(0 0 0 0);
}
css
.reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
  clip-path: inset(0 0 0 0);
}

Backdrop Filter

背景模糊（Backdrop Filter）

css
.glass {
  backdrop-filter: blur(10px) saturate(180%);
  background: rgba(255, 255, 255, 0.7);
}
css
.glass {
  backdrop-filter: blur(10px) saturate(180%);
  background: rgba(255, 255, 255, 0.7);
}

Mix Blend Mode

混合模式（Mix Blend Mode）

css
.text-overlay {
  mix-blend-mode: difference;
  color: white;
}
See visual-effects.md for creative patterns.
css
.text-overlay {
  mix-blend-mode: difference;
  color: white;
}
创意模式请查看visual-effects.md。

prefers-reduced-motion

动画偏好设置（prefers-reduced-motion）

Always wrap motion in preference checks:
css
/* Default: No animation */
.animated {
  opacity: 1;
  transform: none;
}

/* Only animate if user allows */
@media (prefers-reduced-motion: no-preference) {
  .animated {
    animation: fadeIn 0.6s ease-out;
  }
}
始终根据用户偏好判断是否启用动画：
css
/* 默认：无动画 */
.animated {
  opacity: 1;
  transform: none;
}

/* 仅在用户允许时启用动画 */
@media (prefers-reduced-motion: no-preference) {
  .animated {
    animation: fadeIn 0.6s ease-out;
  }
}

Performance Best Practices

性能最佳实践

Animate Only Compositor Properties

仅动画合成器属性

css
/* GOOD - GPU accelerated */
.card {
  transition: transform 0.3s, opacity 0.3s;
}

.card:hover {
  transform: translateY(-4px) scale(1.02);
  opacity: 0.9;
}

/* BAD - Triggers layout/paint */
.card:hover {
  width: 110%;
  margin-left: -5%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
css
/* 推荐 - GPU加速 */
.card {
  transition: transform 0.3s, opacity 0.3s;
}

.card:hover {
  transform: translateY(-4px) scale(1.02);
  opacity: 0.9;
}

/* 不推荐 - 触发布局/重绘 */
.card:hover {
  width: 110%;
  margin-left: -5%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

Use will-change Sparingly

谨慎使用will-change

css
/* Apply only during animation */
.animating {
  will-change: transform, opacity;
}

/* Remove after animation */
.animation-complete {
  will-change: auto;
}
css
/* 仅在动画期间应用 */
.animating {
  will-change: transform, opacity;
}

/* 动画结束后移除 */
.animation-complete {
  will-change: auto;
}

Contain Property

Contain属性

css
/* Isolate expensive effects */
.animated-section {
  contain: layout style paint;
}
css
/* 隔离高开销效果 */
.animated-section {
  contain: layout style paint;
}

Common Patterns

常见模式

Smooth Hover Transitions

平滑悬停过渡

css
.card {
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
css
.card {
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

Staggered Entrance

依次渐显入场动画

css
.item {
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.3s; }
/* ... or use CSS custom properties */

@keyframes fadeIn {
  to { opacity: 1; }
}
css
.item {
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.3s; }
/* ... 或使用CSS自定义属性 */

@keyframes fadeIn {
  to { opacity: 1; }
}

Loading Spinner

加载旋转器

css
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
css
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

Resources

资源