《CSS 简易速速上手小册》第5章：CSS 动画与过渡（2024 最新版）

文章目录

[5.1 CSS 过渡基础：网页的微妙舞步](#5.1 CSS 过渡基础：网页的微妙舞步)
- [5.1.1 基础知识](#5.1.1 基础知识)
- [5.1.2 重点案例：按钮悬停效果](#5.1.2 重点案例：按钮悬停效果)
- [5.1.3 拓展案例 1：渐变显示导航菜单](#5.1.3 拓展案例 1：渐变显示导航菜单)
- [5.1.4 拓展案例 2：动态调整元素大小](#5.1.4 拓展案例 2：动态调整元素大小)
[5.2 关键帧动画：编排你的网页芭蕾](#5.2 关键帧动画：编排你的网页芭蕾)
- [5.2.1 基础知识](#5.2.1 基础知识)
- [5.2.2 重点案例：呼吸效果的背景色变化](#5.2.2 重点案例：呼吸效果的背景色变化)
- [5.2.3 拓展案例 1：滚动显示的文字](#5.2.3 拓展案例 1：滚动显示的文字)
- [5.2.4 拓展案例 2：旋转进入的图标](#5.2.4 拓展案例 2：旋转进入的图标)
[5.3 实用动画案例分析：优雅地迈出每一步](#5.3 实用动画案例分析：优雅地迈出每一步)
- [5.3.1 基础知识](#5.3.1 基础知识)
- [5.3.2 重点案例：页面加载动画](#5.3.2 重点案例：页面加载动画)
- [5.3.3 拓展案例 1：滚动触发的动画](#5.3.3 拓展案例 1：滚动触发的动画)
- [5.3.4 拓展案例 2：数据仪表板的动态图表](#5.3.4 拓展案例 2：数据仪表板的动态图表)

5.1 CSS 过渡基础：网页的微妙舞步

当网页元素轻盈地在状态之间跳跃，那一刻，它们不再是静态的代码块，而是充满生命的舞者。CSS过渡赋予了它们这种能力，让它们在变化中展现出流畅的美感。理解CSS过渡的基础，就是学会编排这场精彩的舞蹈。

5.1.1 基础知识

过渡属性（Transition Property） ：指定哪个CSS属性将应用过渡效果。可以是具体的属性名，或使用 all 应用于所有可过渡的属性。
过渡时长（Transition Duration）：定义过渡效果从开始到结束的时间长度，通常以秒（s）或毫秒（ms）为单位。
过渡曲线（Transition Timing Function） ：控制过渡的速度曲线，例如 linear、ease-in、ease-out 和 ease-in-out。
过渡延迟（Transition Delay）：设置过渡效果开始前的延迟时间。

5.1.2 重点案例：按钮悬停效果

设计一个按钮，当鼠标悬停时，背景颜色和文字颜色平滑过渡，提升用户交互体验。

HTML 结构：

html 复制代码

<button class="transition-button">悬停我</button>

CSS 样式：

css 复制代码

.transition-button {
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  border: none;
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

.transition-button:hover {
  background-color: #0056b3;
  color: #ffcc00;
}

通过设置 transition 属性，我们创建了一个平滑的颜色过渡效果，让按钮在鼠标悬停时更加动感和吸引人。

5.1.3 拓展案例 1：渐变显示导航菜单

假设你的网站有一个隐藏的导航菜单，当用户点击菜单按钮时，希望菜单能够以渐变的方式显示出来。

HTML 结构：

html 复制代码

<nav class="hidden-menu">菜单内容</nav>

CSS 样式：

css 复制代码

.hidden-menu {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.hidden-menu.visible {
  opacity: 1;
}

通过切换 .hidden-menu 元素的 .visible 类，我们可以实现菜单的渐变显示和隐藏效果。

5.1.4 拓展案例 2：动态调整元素大小

让一个元素在鼠标悬停时动态地改变大小，增加页面的互动性。

HTML 结构：

html 复制代码

<div class="resize-box">悬停改变大小</div>

CSS 样式：

css 复制代码

.resize-box {
  width: 100px;
  height: 100px;
  background-color: #007BFF;
  transition: transform 0.5s ease-in-out;
}

.resize-box:hover {
  transform: scale(1.2);
}

通过 transform 属性和过渡效果，我们创建了一个在鼠标悬停时会增大的动态效果，让元素在视觉上更加突出。

CSS过渡是编织网页动态美学的关键线索。通过精心设计的过渡效果，我们不仅能够增强用户的交互体验，还能给网站添加一层流畅而生动的视觉效果。记住，好的过渡应该像微风拂过湖面，轻柔而自然。掌握了这些技巧，就让我们的网站在用户的每一次操作中跳起优雅的舞蹈吧！

5.2 关键帧动画：编排你的网页芭蕾

在网页设计的舞台上，关键帧动画是那些能够让元素跳跃、旋转、闪烁甚至是变形的编排。通过定义动画的关键帧，我们可以精确控制动画从开始到结束的每一个步骤，创造出复杂而生动的视觉故事。

5.2.1 基础知识

关键帧（Keyframes） ：使用 @keyframes 规则定义动画的序列，其中指定了动画开始和结束时的样式，以及中间的任何阶段。
动画名称（Animation Name） ：在 @keyframes 规则中定义的动画名称，用于在元素上引用该动画。
动画时长（Animation Duration）：决定动画从开始到结束的时间长度。
动画迭代（Animation Iteration） ：指定动画应该播放多少次，infinite 表示无限循环。
动画方向（Animation Direction） ：控制动画播放的方向，如 normal、reverse、alternate 等。
动画延迟（Animation Delay）：设置动画开始前的延迟时间。
动画填充模式（Animation Fill Mode） ：决定动画在执行前后如何将样式应用于目标元素，例如 forwards 保留动画结束时的样式。

5.2.2 重点案例：呼吸效果的背景色变化

假设你想让一个元素的背景色呈现出呼吸般的渐变效果，模仿呼吸的节奏，让页面看起来更加生动。

CSS 样式：

css 复制代码

@keyframes breathe {
  0%, 100% { background-color: #88CCFF; }
  50% { background-color: #007BFF; }
}

.breathe-box {
  animation: breathe 5s ease-in-out infinite;
}

这个动画通过改变背景色在两种蓝色之间渐变，创造了一个平缓的呼吸效果。

5.2.3 拓展案例 1：滚动显示的文字

设计一个动画，让文字从左侧滚动进入，停留一会儿，然后继续滚动离开视口，类似于电影的开头字幕。

CSS 样式：

css 复制代码

@keyframes slideInAndOut {
  0% { transform: translateX(-100%); }
  10%, 90% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

.sliding-text {
  animation: slideInAndOut 10s ease-in-out infinite;
}

这个动画让文字像电影字幕一样滚动显示，增加了页面的动态效果和趣味性。

5.2.4 拓展案例 2：旋转进入的图标

假设你有一个社交媒体图标，希望它在页面加载时以旋转的方式出现，给用户一个有趣的视觉提示。

CSS 样式：

css 复制代码

@keyframes spinIn {
  from { transform: rotate(0deg) scale(0); }
  to { transform: rotate(360deg) scale(1); }
}

.social-icon {
  animation: spinIn 1s ease-out forwards;
}

通过这个动画，社交媒体图标在旋转的同时放大，从不可见到完全显示，创造了一个引人注目的入场效果。

关键帧动画提供了一种强大的方式来创造引人入胜的网页体验。它们让我们能够为网站的每一个元素编排独特的舞蹈，让整个页面充满活力和动感。通过细致地规划动画的每一步，我们不仅能够提升用户的参与度，还能以一种富有创造力的方式讲述我们的故事。所以，让我们拿起设计的画笔，为我们的网站编排一场精彩的芭蕾舞剧吧！

5.3 实用动画案例分析：优雅地迈出每一步

动画不仅仅是网页设计的点缀，它们是交流、引导和吸引用户注意力的强大工具。当用得恰到好处时，动画能够提升用户体验，使网站显得更加生动和互动。让我们通过一些实用的案例，探索如何在网页设计中优雅地应用动画。

5.3.1 基础知识

性能考虑：优化动画性能以确保流畅的用户体验，避免使用过多复杂动画导致的卡顿。
动画的目的：每个动画都应该有其存在的理由，无论是提升可用性、增强可访问性还是提供视觉反馈。
适度原则：动画应该适度，过多或过于复杂的动画可能会分散用户的注意力，甚至导致不适。

5.3.2 重点案例：页面加载动画

假设你想要在网页加载时显示一个动画，以提升用户的等待体验，并平滑过渡到网页内容。

HTML 结构：

html 复制代码

<div class="loading-animation">加载中...</div>

CSS 样式：

css 复制代码

@keyframes fadeOut {
  to { opacity: 0; }
}

.loading-animation {
  animation: fadeOut 1s ease-out forwards;
  animation-delay: 2s; /* 假设加载需要一定时间 */
  opacity: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  z-index: 1000;
}

这个案例展示了一个简单的页面加载动画，它在页面加载完成后渐渐淡出，为用户提供一个平滑的过渡效果。

5.3.3 拓展案例 1：滚动触发的动画

为了增加页面滚动的趣味性，可以为某些元素添加在滚动到视窗时才触发的动画。

CSS 样式：

css 复制代码

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.scroll-animation {
  opacity: 0;
  animation: slideUp 0.5s ease-out forwards;
  animation-play-state: paused;
}

.scroll-animation.in-view {
  animation-play-state: running;
}

JavaScript：

javascript 复制代码

window.addEventListener('scroll', () => {
  document.querySelectorAll('.scroll-animation').forEach(el => {
    if (el.getBoundingClientRect().top < window.innerHeight) {
      el.classList.add('in-view');
    }
  });
});

这个案例结合了CSS动画和简单的JavaScript，为滚动到视窗内的元素添加动画，增加页面互动性。

5.3.4 拓展案例 2：数据仪表板的动态图表

在一个数据仪表板中，使用动画展示数据的变化可以帮助用户更好地理解数据。

HTML 结构：

html 复制代码

<div class="chart" style="--value:75;"></div>

CSS 样式：

css 复制代码

.chart {
  width: 100px;
  height: 100px;
  background: conic-gradient(#4caf50 var(--value), #ddd 0);
  border-radius: 50%;
  transition: background 1s ease-out;
}

通过改变CSS自定义属性 --value，可以在图表上创建动态变化的视觉效果，使数据展示更加直观和动态。

通过这些案例，我们看到了在网页设计中合理应用动画的重要性和价值。动画不仅能够提升用户体验，还能够在视觉上吸引用户，让信息传递更加有效。记住，优雅的动画应该是流畅和有目的的，像是网页的微妙舞步，引导用户体验每一刻的美好。继续探索和实验，让你的网站通过动画和过渡的魔法生动起来吧！