01 / 10 · COVERApple Effects Library · v1
A Web Presentation Skill Library

Apple Effects

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

Think different, ship different.

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

类索引
按序滑落。

ClassCategoryBest forDuration
.ae-blur-inEntranceHero / Title1.2s
.ae-clip-revealEntranceBig headline1.2s
.ae-line-drawEntranceSVG icon / chart1.4s
.ae-bar-growChartBar chart1.2s
.ae-row-cascadeTableData table0.5s × N
.ae-magic-moveTransitionHero across pages1.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