CSS transition和animation的用法和区别

Transition和Animation在CSS中都是用于实现元素状态变化的效果，但它们在用法和特性上存在明显的区别。

Transition

transition是过度属性，主要强调的是元素状态的过渡效果。

它通常用于在元素的状态发生变化时，平滑地过渡到一个新的状态。

Transition的语法包括指定要过渡的CSS属性、过渡效果的持续时间、速度曲线以及开始延迟等。

例如，当鼠标悬停在div元素上时，可以使用Transition来实现宽度和高度的平滑过渡：

div {  
  width: 100px;  
  height: 100px;  
  background-color: red;  
  transition: width 1s ease-in-out, height 0.5s linear;  
}  
  
div:hover {  
  width: 200px;  
  height: 200px;  
}
1
2
3
4
5
6
7
8
9
10
11

在这个例子中，当鼠标悬停在div上时，其宽度和高度会平滑地过渡到新的值，过渡的持续时间分别为1秒和0.5秒，速度曲线分别为ease-in-out和linear。

---

Animation

animation是动画属性，加强调流程和控制，它提供了更多的自由度和复杂性。

它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。

Animation使用关键帧（keyframes）来定义动画的多个状态，并可以指定每个状态的样式。

此外，Animation还封装了循环次数、动画延迟等功能。

Animation的使用步骤如下：

1. 定义动画
   使用@keyframes规则来定义动画的各个状态。

   @keyframes change {  
     0% { width: 200px; }  
     50% { width: 500px; height: 300px; }  
     100% { width: 800px; height: 500px; }  
   }
   1
   2
   3
   4
   5

2. 使用动画
   将定义的动画应用于需要动画效果的元素上。

   div {  
     animation-name: change;  
     animation-duration: 4s;  
   }
   1
   2
   3
   4

   在这个例子中，div元素的宽度和高度会在4秒内按照定义的关键帧进行变化。

---

区别

• 控制粒度
  Transition的控制粒度相对较粗，主要关注过渡的速度和方式。
  Animation提供了更细粒度的控制，可以手动指定每个阶段的属性，以及循环次数、动画延迟等功能。

• 状态数量
  Transition只有两个状态：开始状态和结束状态。
  Animation可以有多个状态，通过关键帧来定义，更加灵活和自由。

• 触发方式
  Transition需要借助其他方式（如CSS状态选择器或JavaScript）来触发。
  Animation的触发方式则更加多样，可以通过设置动画属性直接触发。