32. 说说transition、animation、transform的作用

transform是一个静态属性，给该属性设置值，元素就会变换到指定的值，如：
```
box1 {
transform: rotate(30deg);
}
```
则box1会旋转30度。注意这个旋转是静态的，无任何动画效果。
transition。该属性，可以设置动画效果，如：
```
.box2 {
  background: rgb(144, 93, 151);
  transition: transform 1s
}
.box2:hover {
  /* 定义transform动画 */
  transform: rotate(30deg);
}
```
它表示，将transform用作动画变换，通常需要给一个触发条件，比如hover，此时表示hover的时候，将transform属性的值，用作动画变换，也就是旋转30度。用作动画变换的属性，也可以是其他属性，比如：
```
.box2 {
 width: 100px;
  background: rgb(144, 93, 151);
  transition: width 1s;
}
.box2:hover {
  /* 定义transform动画 */
  width: 200px;
}
```
表示，将width属性用作动画变化，变换范围是从100px变成200px，时间为1s。

animation可定制高级的动画，比如循环动画，延时动画，定制贝塞尔曲线的动画等，如：

.box3 {
  animation:box3Move 1s infinite;
}
@keyframes box3Move {
  /* 定义animate动画 */
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(30deg);
  }
}

transform

可以对元素进行改变，比如旋转 rotating，倾斜 skew，位移 translating, 放大缩小 scaling。

.element {
  width: 20px;
  height: 20px;
  transform: scale(20);
}

transition

一个时间段内，让元素的某一个属性变为另一个属性，形成动画的效果

不会重复展示，需要结合事件才能出发

div {
  transition: background-color 0.5s ease;
  background-color: red;
}
div:hover {
  background-color: green;
}

animation

顾名思义就是做动画。很多 CSS 属性都可以做成动画，比如 Color，Background-color，width， height。

每个 animation 都需要定义 @keyframes 规则

.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

zlx362211854 / daily-study

32. 说说transition、animation、transform的作用 #69

transform

transition

animation