APPLE EFFECTS · 验证稿

38 个效果，
一效一页。

18 入场 · 8 出场 · 10 转场 · 3 JS 联动

← → 翻页　　Space 下一页　　Home 首页
SECTION 1

入场动画 · 18 款

覆盖淡入 / 缩放 / 模糊 / 剥离 / 3D / SVG 描边 / 柱图生长 / 环形扫过 / 光晕

ENTRANCE 01 / 18

.ae-fade-up

淡入上推 · 最通用入场

向上浮现

Apple 发布会基础款

ENTRANCE 02 / 18

.ae-fade-down

从上方下滑落入

向下落入

适合副标题与 tag

ENTRANCE 03 / 18

.ae-fade-left

从左侧滑入

从左进入

引导式叙事

ENTRANCE 04 / 18

.ae-fade-right

从右侧滑入

从右进入

通常和 fade-left 对称

ENTRANCE 05 / 18

.ae-scale-in

Keynote Scale & Fade

缩放淡入

0.88 → 1

ENTRANCE 06 / 18

.ae-pop

带弹性的回弹缩放

Pop!

spring easing

ENTRANCE 07 / 18

.ae-blur-in

模糊浮现 · Apple 超常用

模糊浮现

24px 模糊 → 清晰

ENTRANCE 08 / 18

.ae-clip-reveal

字幕从下往上剥离

字幕剥离
Apple 片头字幕经典
ENTRANCE 09 / 18

.ae-drift-in

慢速大范围漂移

缓慢漂移

1.6s hero 时长

ENTRANCE 10 / 18

.ae-swing-in

旋转摆入

Swing

-6deg + spring

ENTRANCE 11 / 18

.ae-rise-3d

3D 倾斜升起 · 卡片

A15
A16
A17 Pro
A18 Pro
ENTRANCE 12 / 18

.ae-ken-burns

图片缓慢推拉

8s scale(1.12) → 1

ENTRANCE 13 / 18

.ae-image-mask

遮罩从中心展开

clip-path inset 50% → 0

ENTRANCE 14 / 18

.ae-row-cascade

表格逐行落下

机型芯片GPU功耗
iPhone 13A155-core基准
iPhone 14 ProA165-core-20%
iPhone 15 ProA17 Pro6-core-30%
iPhone 16 ProA18 Pro6-core-40%
ENTRANCE 15 / 18

.ae-line-draw

SVG 描边入场

stroke-dashoffset 自动测量

ENTRANCE 16 / 18

.ae-bar-grow

柱状图从底部生长

ENTRANCE 17 / 18

.ae-sweep

环形扫过 · Donut

78%
能效提升
ENTRANCE 18 / 18

.ae-glow-in

文字发光呼吸

Hello Blue

text-shadow 0 → 40/80px blue

SECTION 2

出场动画 · 8 款

点击卡片触发 · Reset 复位

EXIT 01 / 8

.ae-out-fade

纯淡出

▶
Fade Out
点击播放出场
EXIT 02 / 8

.ae-out-scale

缩小淡出

▶
Scale Down
点击播放出场
EXIT 03 / 8

.ae-out-up

向上滑出

▶
Slide Up
点击播放出场
EXIT 04 / 8

.ae-out-down

向下滑出

▶
Slide Down
点击播放出场
EXIT 05 / 8

.ae-out-blur

模糊消融

▶
Blur Out
点击播放出场
EXIT 06 / 8

.ae-out-drift

漂移远离

▶
Drift Out
点击播放出场
EXIT 07 / 8

.ae-out-collapse

垂直坍缩

▶
Collapse
点击播放出场
EXIT 08 / 8

.ae-out-flip

3D 翻转

▶
Flip
点击播放出场
SECTION 3

转场动画 · 10 款

每页声明下一转场 · 按 → 触发 · View Transitions API

TRANSITION 01 / 10

Dissolve

交叉淡入

dissolve
按 → 键，下一页用 dissolve 转场
TRANSITION 02 / 10

Push Left

整屏左推

push-left
按 → 键，下一页用 push-left 转场
TRANSITION 03 / 10

Push Right

整屏右推

push-right
按 → 键，下一页用 push-right 转场
TRANSITION 04 / 10

Cube

立方体翻转 · Keynote 经典

cube
按 → 键，下一页用 cube 转场
TRANSITION 05 / 10

Wipe

从左到右擦除

wipe
按 → 键，下一页用 wipe 转场
TRANSITION 06 / 10

Iris

圆形光圈展开

iris
按 → 键，下一页用 iris 转场
TRANSITION 07 / 10

Fade Through Black

过黑淡入 · 发布会重转场

fade-black
按 → 键，下一页用 fade-black 转场
TRANSITION 08 / 10

Zoom In

放大冲入

zoom-in
按 → 键，下一页用 zoom-in 转场
TRANSITION 09 / 10

Reveal Up

新页向上揭开

reveal-up
按 → 键，下一页用 reveal-up 转场
TRANSITION 10 / 10

Magic Move

同名元素跨页变形

magic-move
按 → 键，下一页用 magic-move 转场
SECTION 4

JS 联动 · 3 款

count-up · type-on · stagger

JS 01 / 3

count-up · 数字滚动

三次方 ease-out · 1600ms

0良品率
0日活用户
0冷启动
JS 02 / 3

type-on · 打字机

逐字塞入 span.ae-char · 80ms

— Apple, 1997

JS 03 / 3

stagger · 级联延迟

父元素加 .ae-stagger，子元素自动 80ms 阶梯

A17 Pro
A18 Pro
M3
M3 Pro
M3 Max
M3 Ultra
END

38 / 38

全部效果 · 每一个都已到位

18入场
8出场
10转场
3JS 联动
01 / 45