前言
在日常前端开发中，很少有用到需要做动画效果的页面，大部分都是靠UI切图，所以一直对css的动画一头雾水。最近接到一个Tab组件的开发需求，领导希望实现类似某网站上的特定动画效果。
我对着需求研究了半天，最后发现只需添加一行CSS代码就能达成目标——原来困扰我许久的动画实现竟如此简单。
这次经历让我意识到，正是因为对CSS动画知识储备不足，才白白浪费了半天的时间。趁着当下有空，我决定系统梳理一下CSS动画相关内容，重点搞懂animation、transition、transform、translate这四个常被混淆的英文单词及其具体用途。
看看代码的效果，便知道这四个属性的区别了。
本文参考了这篇文章：juejin.cn/post/684490…
| 属性 | 含义 |
|---|---|
| transition（过渡） | 用于设置元素的样式过渡 |
| animation（动画） | 用于设置动画属性，他是一个简写的属性，包含6个属性 |
| transform（变形） | transform 属性允许你旋转、缩放、倾斜或平移给定元素。 |
| translate（移动） | translate 允许你单独声明平移变换，并独立于 transform 属性 |
transition（过渡）
用于设置元素的样式过渡。
这段代码表示，对.box设置一个transition过渡属性，在hover变形旋转缩放时，慢慢过渡这个变形旋转缩放的效果。
transition属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 的一个简写属性。
| 值 | 描述 | 使用方式 | 默认值 |
|---|---|---|---|
| transition-property | 设置过渡效果的 CSS 属性的名称 | 例如margin-right、color等，比如设置了hover时margn-right有变化：transition-property：margin-right； | all |
| transition-duration | 完成过渡效果需要多少秒或毫秒 | transition-property: 0.5s； | 0s |
| transition-timing-function | 速度效果的速度曲线 | 有好多种，看mdn，比如ease等线性变化，还有step等。transition-timing-function：ease | ease |
| transition-delay | 定义过渡效果何时开始 | transition-delay: 1s; | 0s |
animation（动画）
用于设置动画属性，他是一个简写的属性，包含6个属性—— 是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
| 模仿值 | 描述 | 使用方式示例 | 默认值 |
|---|---|---|---|
| animation-name | 用来调用 @keyframes定义好的动画，与 @keyframes 定义的动画名称一致 | animation-name: name1; | none |
| animation-duration | 动画所持续的时间 | animation-duration: 2s; | 0s |
| animation-timing-function | 速度效果的速度曲线，如 ease, linear, ease-in 等 | animation-timing-function: ease-in-out; | ease |
| animation-delay | 执行动画之前等待的时间 | animation-delay: 1s; | 0s |
| animation-iteration-count | 定义动画的播放次数，可选具体次数或者无限(infinite) | animation-iteration-count: 3; 或 infinite; | 1 |
| animation-direction | 设置动画播放方向：normal(按时间轴顺序), reverse(反方向), alternate(来回往复), alternate-reverse(反向再正向交替) | animation-direction: alternate; | normal |
| animation-play-state | 控制元素动画的播放状态，通过此来控制动画的暂停和继续，值：running(继续)，paused(暂停) | animation-play-state: paused; | running |
| animation-fill-mode | 控制动画结束后，元素的样式。有四个值：none（回到初始状态）、forwards（停留在结束帧）、backwards（回到第一帧）、both（结合 direction 应用 forwards/backwards）注意与 iteration-count 不要冲突（如无限循环时） | animation-fill-mode: forwards; | none |
transform（变形）
transform 属性允许你旋转、缩放、倾斜或平移给定元素。
translate（移动）
translate 允许你单独声明平移变换，并独立于 transform 属性。
直接 translate: 50% -40%; 就可以。
