← FC Coder · HomePhase 04 · Lesson 43 · 60 min
Lesson43
Phase Four · Game · Matchday 43 · Self-Running
@keyframes 动画
不用 hover 也跑
Today's 3 Jobs · 今天这三件事
- 01@keyframes celebrate 定义三关键帧
- 02animation 属性触发infinite 自跑
- 03🌟 哈兰德被选中跳起来庆祝
42 课 hover 触发 · 但庆祝要自跑。`@keyframes` 定义 + `animation` 调用 · infinite 循环。Tailwind v4 arbitrary syntax 简洁。今天哈兰德被选中跳起来。
Concept
@keyframes 三关键帧
animation: celebrate 2s ease-in-out infinite;
0%
translateY(0)
50%
translateY(-20px)
100%
translateY(0)
Half 2
kf · apply · AI pulse
01定义 @keyframes
01Min
Cursor + pnpm dev
老三件套。
02Min
app/globals.css 加 @keyframes celebrate
0% translateY(0) · 50% translateY(-20px) · 100% translateY(0)。
02应用到 PlayerCard
03Min
PlayerCard isSelected ? 'animate-[celebrate_1.5s_ease-in-out_infinite]' : ''
Tailwind v4 arbitrary syntax。选中的卡跳。
04Min
替换 animate-bounce 内置 Tailwind
对比内置 vs 自定义。
05Min
加 keyframes shake · hover 时用
0% rotate(0) · 25% rotate(-3deg) · 75% rotate(3deg) · 100% rotate(0)。
03AI Pair pulse-gold
06Min
AI Pair: pulse-gold keyframes (金光呼吸)
Cmd+K · 'box-shadow 金色 0 0 0 → 0 0 20px 5px 金 → 0'。
07Min
📸 截图选中跳起
Phase 4 第 3 张战利品。
讲给爸爸听
3 题
01transition vs animation 差?Hint ↓
transition 触发才动 · animation 自跑。
02infinite 怎么停?Hint ↓
animation-play-state: paused 或换掉 class。
03Tailwind v4 自定义?Hint ↓
arbitrary 'animate-[name_dur_ease_inf]' 或 config。
温度计
评分
今天难度Difficulty
0
今天开心Fun
0