01 / 10 · COVERApple Effects Library · v1

A Web Presentation Skill Library

Apple Effects

36 个入场/出场/转场动画，一套设计纪律，零依赖交付。

Think different, ship different.

← → 翻页 · Space 下一页 · Home / End 首尾

02 / 10 · MAGIC MOVEview-transition-name

Keynote 的招牌效果 · 同一元素跨页变形

Magic Move

浏览器会自动插值位置、尺寸、透明度。

03 / 10 · NUMBERS COME ALIVEcount-up + pop

Real Data, Real Easing

库里有什么
一目了然。

0

Total Effects

0

Entrance

0

Transitions

0

Dependencies

04 / 10 · ICONS THAT DRAW THEMSELVESSVG stroke-dashoffset

Entrance · Line Draw

图标自己描边入场。

交付稳定

zero dependency

随拿随用

copy & paste

分类检索

by content type

持续成长

extensible

05 / 10 · CHARTS THAT BUILD THEMSELVESbar-grow + count-up

Entrance · Bar Grow

效果分布
按类目拆解。

0

Entrance

0

Exit

0

Transition

0

Text

0

Image

0

Chart

06 / 10 · TABLES THAT CASCADErow-cascade · 80ms stagger

Entrance · Row Cascade

类索引
按序滑落。

Class	Category	Best for	Duration
.ae-blur-in	Entrance	Hero / Title	1.2s
.ae-clip-reveal	Entrance	Big headline	1.2s
.ae-line-draw	Entrance	SVG icon / chart	1.4s
.ae-bar-grow	Chart	Bar chart	1.2s
.ae-row-cascade	Table	Data table	0.5s × N
.ae-magic-move	Transition	Hero across pages	1.2s

07 / 10 · WORDS THAT BREATHEtype-on · 60ms/char

Entrance · Typewriter

— 苹果发布会的节奏哲学 · 1.2 秒，ease-out-expo

08 / 10 · IMAGES THAT REVEALimage-mask + ken-burns

Entrance · Image Mask

主体
由内向外铺开。

用 clip-path 的 inset 从中心向外展开，搭配 1.2 秒 ease-out-expo——观感上像 Keynote 的 image reveal。

09 / 10 · TRANSITION GALLERYdata-transition · click any

Slide-to-Slide · 1:1 Keynote

8 种页间转场
点击试播。

← 上一页 · → 下一页 · 点击任一按钮预览

10 / 10 · TAKE WHAT YOU NEEDweb-presentation skill

Apple Effects Library · v1

36 个效果。
一个库。

入场 18 · 出场 8 · 转场 10 · 全部零依赖。

已写入 ~/.claude/skills/web-presentation/assets/apple-effects/

Wayne × Claude · 2026-04-10

Apple Effects

Magic Move

库里有什么一目了然。

图标自己描边入场。

效果分布按类目拆解。

类索引按序滑落。

主体由内向外铺开。