一、过渡
1、概念
transition过渡属性是CSS3浓墨重彩的特性，过渡可以
为一个元素在不同样式之间变化自动添加 “补间动画”。过渡包含四个小属性，如下
| 属性 | 意义 |
| transition-property | 哪些属性要过渡 |
| transition-duration | 动画时间 |
| transition-timing-function | 动画变化曲线（缓动效果） |
| transition-delay | 延迟时间 |
2、哪些属性可以参与过渡
- 所有数值类型的属性，都可以参与过渡，比如width、height、left、top、border-radius
- 背景颜色和文字颜色都可以被过渡
- 所有变形（包括2D和3D）都能被过渡
3、过渡的缓动效果
transition的第三个参数就是缓动参数，也是变化速度曲线，常用缓动参数如下（曲线越陡速度越快）
transition-timing-function.png
缓动参数可以使用贝塞尔曲线值来设置，网站
https://cubic-bezier.com/可以生成贝塞尔曲线，可以自定义动画缓动参数，拖动曲线得到自己想要的变化曲线后，复制cubic-bezier即可
二、动画
1、可以使用
@keyframes 来定义动画，keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀2、定义动画之后，就可以使用animation属性调用动画
/* keyframe: 定义动画 r: 动画的名字 from: 起始状态 to: 结束状态 */ @keyframes r { from { transform: rotate(0); } to { transform: rotate(360deg); } } /* name: 动画名字 duration: 总时长 timing-function: 缓动效果 delay: 延迟时间 iteration-count: 执行次数，永远执行写infinite，可不写 direction: 想让动画的2、4、6...（偶数次）自动逆向执行，加上alternate参数即可，可不写 fill-mode: 想让动画停止在最后结束状态，加上forwards，可不写 */ animation: name duration timing-function delay iteration-count direction fill-mode; animation: r 3s linear 0s infinite;
