CSS 快速入门

动画与过渡#

CSS 动画和过渡效果能够为网页添加动态元素，提升用户体验。通过合理使用动画和过渡，可以使界面更加生动、直观，并引导用户注意力。

动画效果（animation）#

动画由两部分组成：描述动画的样式规则和指定动画开始、结束以及中间点样式的关键帧。

动画属性#

animation-name：指定要应用的动画名称
animation-duration：指定动画完成一个周期所需的时间
animation-timing-function：指定动画的速度曲线
animation-delay：指定动画开始前的延迟时间
animation-iteration-count：指定动画应播放的次数
animation-direction：指定动画是否应该反向播放
animation-fill-mode：指定动画在播放前或播放后的样式
animation-play-state：指定动画是正在运行还是暂停

简写属性：

.element {
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

关键帧（@keyframes）#

@keyframes 规则用于定义动画的各个阶段。它允许我们指定动画序列中的关键点，浏览器会自动计算中间帧。

基本语法#

@keyframes 动画名称 {
  0% {
    /* 动画开始时的样式 */
  }
  50% {
    /* 动画中间点的样式 */
  }
  100% {
    /* 动画结束时的样式 */
  }
}

关键帧示例#

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element {
  animation: fadeIn 2s ease-in-out;
}

多阶段动画#

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.element {
  animation: bounce 2s infinite;
}

过渡效果（transition）#

过渡效果是元素从一种样式逐渐变化为另一种样式的过程。与动画不同，过渡需要触发事件（如悬停、点击等）才会开始。

过渡属性#

transition-property：指定应用过渡效果的 CSS 属性
transition-duration：指定过渡效果完成所需的时间
transition-timing-function：指定过渡效果的速度曲线
transition-delay：指定过渡效果开始前的延迟时间

简写属性：

.element {
  transition: property duration timing-function delay;
}

过渡示例#

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: darkblue;
}

多属性过渡#

.element {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 0.3s ease, height 0.5s ease, background-color 0.2s ease;
}

.element:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
}

动画与过渡的区别#

特性	动画（Animation）	过渡（Transition）
触发方式	自动触发或通过 JavaScript 控制	需要触发事件（如悬停、点击等）
循环	可以无限循环	只能执行一次
中间状态	可以定义多个中间状态	只有开始和结束两个状态
控制	可以暂停、恢复、反向播放	一旦开始就无法控制
适用场景	复杂的、多阶段的动画	简单的、状态之间的过渡

动手试试#

让我们创建一个简单的动画演示页面，展示几种基本的动画和过渡效果。

这个简化版的演示包含了以下要点：

动画效果：
- 淡入动画：使用 opacity 属性
- 滑入动画：使用 transform: translateX() 属性
- 弹跳动画：使用多阶段关键帧
过渡效果：
- 基本过渡：悬停时改变颜色和位置
- 缩放过渡：悬停时放大元素
- 旋转过渡：悬停时旋转元素

你可以尝试修改这些样式，例如：

调整动画时间和缓动函数
添加更多的动画效果
修改元素的颜色和大小
尝试组合不同的动画和过渡效果