从0开始学习前端 第十七课：动画和过渡

第十七课：动画和过渡

学习目标

在本课中，你将学习到以下内容：

1. CSS过渡的基本概念
2. CSS动画的基本概念
3. 如何使用transition属性创建平滑的状态变化
4. 如何使用@keyframes和animation属性创建复杂的动画序列
5. 理解并使用动画和过渡的各种参数，如持续时间、延迟、时间函数等
6. 如何在实际网页设计中运用动画和过渡增强用户体验

学习内容

1. CSS过渡 (Transitions)
过渡是CSS中的一种效果，可以在元素从一种样式变化到另一种样式时，让变化显示得更平滑、自然。要创建过渡效果，你需要指定两样东西：你想要过渡的CSS属性，以及过渡效果的持续时间。

• transition-property：指定要添加过渡效果的CSS属性。
• transition-duration：定义过渡效果的持续时间。
• transition-timing-function：定义速度效果的速度曲线。
• transition-delay：定义过渡效果何时开始。

代码示例：

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}

预计输出效果：当鼠标悬停在div上时，它的宽度在2秒内线性地从初始值增加到300px，过渡将在1秒后开始。

2. CSS动画 (Animations)
使用CSS动画，你可以创建复杂的动画序列，它不仅包括状态之间的过渡，还可以在多个关键帧之间定义样式。

• @keyframes：定义动画序列。
• animation-name：将@keyframes定义的动画与元素关联。
• animation-duration：动画持续时间。
• animation-timing-function：动画的速度曲线。
• animation-delay：动画开始前的延迟。
• animation-iteration-count：动画应该播放的次数。
• animation-direction：动画是否应该轮流反向播放。

代码示例：

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

div {
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

预计输出效果：背景颜色将在红色和黄色之间不断变化，每次动画持续4秒，这个动画会无限次数地播放，并且每次播放方向交替。

课后练习

1. 创建一个<div>元素，当鼠标悬停时，让这个<div>的背景颜色在3秒内平滑地从蓝色变为绿色。
2. 使用@keyframes创建一个动画，使一个<div>元素在5秒内先向右移动100px，然后向下移动50px。
3. 为上述动画添加一个linear时间函数，并设置动画延迟2秒开始。

练习解析：

1. 通过设置transition属性，你可以使得<div>的背景颜色在鼠标悬停时平滑过渡。

div {
  background-color: blue;
  transition: background-color 3s;
}
div:hover {
  background-color: green;
}

2. 使用@keyframes和animation属性来创建复杂动画。

@keyframes moveDiv {
  0% { transform: translate(0, 0); }
  50% { transform: translate(100px, 0); }
  100% { transform: translate(100px, 50px); }
}

div {
  animation: moveDiv 5s;
}

3. 为动画添加线性时间函数和延迟。

div {
  animation: moveDiv 5s linear 2s;
}

完成上述练习后，你将理解如何在网页中使用过渡和动画来增强用户体验。记得不要过度使用动画，这可能会分散用户的注意力或者导致性能问题。适当和恰到好处的动画可以提升网站的专业感和吸引力。

---

章节目录
十九课：介绍JavaScript