一、过渡
1、概念
transition过渡属性是CSS3浓墨重彩的特性，过渡可以
为一个元素在不同样式之间变化自动添加 “补间动画”。过渡包含四个小属性，如下
| 属性 | 意义 |
|---|---|
| transition-property | 哪些属性要过渡 |
| transition-duration | 动画时间 |
| transition-timing-function | 动画变化曲线（缓动效果） |
| transition-delay | 延迟时间 |
/*
width: 什么属性要过渡，例如由正方形变为圆形则为border ，如果要所有属性都参与过渡，可以写all（all尽量少用，会引发效率问题）
1s: 动画时长，单位是秒
linear: 变化速度曲线
0s: 延迟时间，单位是秒
*/
transition: width 1s linear 0s;
2、哪些属性可以参与过渡
- 所有数值类型的属性，都可以参与过渡，比如width、height、left、top、border-radius
- 背景颜色和文字颜色都可以被过渡
- 所有变形（包括2D和3D）都能被过渡
3、过渡的缓动效果
transition的第三个参数就是缓动参数，也是变化速度曲线，常用缓动参数如下（曲线越陡速度越快）
transition-timing-function.png
缓动参数可以使用贝塞尔曲线值来设置，网站
https://cubic-bezier.com/可以生成贝塞尔曲线，可以自定义动画缓动参数，拖动曲线得到自己想要的变化曲线后，复制cubic-bezier即可
transition: width 5s cubic-bezier(.17,.67,.83,.67) 0s;
/*
当盒子又是舞台，又是演员的时候，设置此属性
设置变形状态，保留它内部的3D效果
*/
transform-style: preserve-3d;
二、动画
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;
