transition过渡/transform变形/animation动画
==1. CSS3==
CSS3是CSS的最新版本。 width height background border 都属于 CSS2.1 CSS3 会保留之前 CSS2.1的内容，只是添加了一些新的语法。
CSS3 : border-radius :nth-of-type() background-size
==2. transition过渡==
transition-property : 规定设置过渡效果的CSS属性的名称。 all ( 默认值 ) , 指定 width , height;
transition-duration : 规定完成过渡效果需要多少秒或毫秒。 需要添加单位：s (秒) ms (毫秒) 1s == 1000ms
transition-delay : 定义过渡效果何时开始。 2s : 延迟两秒进行过渡 -2s : 提前两秒进行过渡
transition-timing-function : 规定速度效果的速度曲线。 运动形式：加速、减速、匀速... linear ease（默认值） ease-in ease-out ease-in-out cubic-bezier （ cubic-bezier.com ）
复合写法：transition:all 2s linear; √ transition:linear 2s all; √ transition:2s linear all; √ 注意：当总时间与延迟时间同时存在的时候，就有顺序了，第一个是总时间，第二个是延迟时间。
transition:2s 3s linear all; √
注意：不要把transition放到hover中
==3. transform变形==
translate : 位移transform:translate(100px,100px); : 两个值 分别对应 x 和 y。 transform:translateX(100px); transform:translateY(100px); transform:translateZ(100px); ( 3d )
scale : 缩放transform:scale(num) num是一个比例值，正常比例是1。 transform:scale(num1 , num2) 两个值 分别对应 w 和 h transform:scaleX() transform:scaleY() transform:scaleZ() ( 3d )
rotate : 旋转transform:rotate(num) num是旋转的角度 30deg 正值：顺时针旋转 负值：逆时针旋转 表示一个角：角度deg 或 弧度rad
rotateX() ( 3d )
rotateY() ( 3d )
rotateZ()
注 : rotate()跟rotateZ()是等价关系。
==四. 想做特效==
要确定：起点值和结束值。
套路：
1.先把静态的效果做出来。 2. 把要运动的终点位置先做出。 3. 指定 tranform变形中对应的 0 值 ( 结束点位置 ). 4. 写 tranform变形的起点值 (起点的位置) 复制代码
==五. animation动画==
原理：逐帧动画。会把整个运动过程，划分成100份。
animation-name : 设置动画的名字 (自定义的)
animation-duration : 动画的持续时间
animation-delay : 动画的延迟时间
animation-iteration-count : 动画的重复次数 ，默认值就是1 ，infinite无限次数
animation-timing-function : 动画的运动形式
ease linear
@keyframes 动画的名字 {
from {}
to {}
}
from : 起点位置 , 等价于 0% to : 终点位置 ，等价于 100%
注：默认情况下，元素运动完毕后，会停到起始位置。
复合样式：
animation
animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见。
none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
backwards : 在延迟的情况下，让0%在延迟前生效
forwards : 在运动结束的之后，停到结束位置
both : backwards和forwards同时生效
animation-direction : 属性定义是否应该轮流反向播放动画。
alternate : 一次正向(0%~100%)，一次反向(100%~0%)
reverse : 永远都是反向 , 从100%~0%
normal (默认值) : 永远都是正向 , 从0%~100%复制代码==六. animate.css==
一款强大的预设css3动画库。 官网地址：https://daneden.github.io/animate.css/ 基本使用： animated : 基类(基础的样式，每个动画效果都需要加) infinite : 动画的无限次数 如果想改变运动的时间：需要在css文件中改变animated这个样式里的时间。复制代码
==七. 3D效果==
perspective(景深) : 离屏幕多远的距离去观察元素，值越大幅度越小。 3D的眼镜 rotateX rotateY translateZ scaleZ 注：反馈回来的立体，仅限于平面。
作者：DcTbnk
链接：https://juejin.cn/post/7030789855873351694