动画效果

让网页动起来的魔法

📖知识引入

🎬transition过渡

属性变化时不再「啪」地瞬移，而是平滑滑过去——像自动扶梯代替了闪现。颜色渐变、位置滑动，一行transition全搞定。

🎪animation动画

定义几个关键帧，元素自己按剧本演：旋转、飘动、闪烁。@keyframes就是剧本，元素就是演员，循环播放也不喊累。

🔄transform变形金刚

translate移动位置、rotate旋转角度、scale放大缩小——一个属性三种魔法。元素的三种变形术，全由transform承包。

🐌ease缓动节奏

匀速的动画像机器人，生硬！加个ease-out先快后慢、ease-in-out中间快两头慢——有节奏的动画才像活物。

🤖AI动画师

告诉AI「鼠标悬停时卡片轻轻上浮并加深阴影」「标题进场时从下往上淡入」，AI写出丝滑动画，还自带节奏感。

💡

动画要克制：全是特效的网页像蹦迪，重点全被晃没了！

🔍瞬移 vs 滑动

/* 魔法咒语：所有变化都给我滑过去 */
.card {
  transition: all 0.3s ease;
}

/* 悬停时上浮+阴影加深 */
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

/* 进场动画：从下往上淡入 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

h1 {
  animation: fadeInUp 0.8s ease;
}

鼠标悬停时，卡片上浮的两种方式：

❌ 无transition（瞬移）：
悬停前：卡片在(0,0)
悬停后：卡片在(0,-20)  ←啪！瞬移
  感觉：廉价、生硬、像卡了

✅ 有transition（滑动）：
悬停前：卡片在(0,0)
过渡中：(0,-3)…(0,-8)…(0,-14)…
悬停后：卡片在(0,-20)  ←嗖~平滑
  感觉：丝滑、高级、有生命

动画片也是这个原理！
每秒画24张静止画面，
快速翻页就成了动画。
CSS动画=让浏览器帮你
自动「翻页」。

右边代码：悬停上浮+变色，
0.3秒的过渡，
廉价感瞬间变高级感！

🎯小测验

第1题：transition的作用是？

第2题：想让按钮悬停时放大1.2倍，用transform的什么方法？

第3题：关于网页动画，正确的观念是？

📝本课知识点

✓transition让变化平滑不瞬移
✓animation+keyframes让元素自演剧本
✓translate移动、rotate旋转、scale缩放
✓ease缓动让动画有生命节奏
✓AI能写出丝滑悬停动画

第19课完成！继续探索下一课吧 🚀

⚡

上一课

第18课

下一课

第20课

⚡