1.过度
① 参与过度的属性：多个属性之间用逗号分隔，如果没有设置参与过度的属性，默认值是All (所有属性都参与过度)。
transition-property:width,height
② 参与过度的时间，必须写，单位 s ,ms。
transition-duration:1s,2s
时间多个值时，和参与过度的属性一一对应，逗号隔开。
③ 过度属性的位置，如果写在hover里，只有鼠标滑过有过渡效果，写给盒子本身，鼠标滑过和滑出都有过渡效果。
④ 过渡速度变化曲线。
transition-timing-function：ease（默认值），linear（匀速），ease-in（先慢后快），ease-out（先快后慢），ease-in-out（两端慢，中间快）。
贝塞尔曲线官网：https://cubic-bezier.com
⑤ 过渡延迟时间。
transition-delay:1s.
设置多个时间时，和参与过度的属性是一一对应的关系，如果只有一个值，所有时间都延迟相同时间。
⑥ 复合写法。
transition : all 2s linear 1s;//所有属性都一样。
transition：width 1s linear 0s,height 2s ease 1s,
使用复合写法过度时间必须写！！！
2.元素的变换，transform:
2D变换：
平移：translate（x，y）
缩放：scale（）一个值同时缩放，两个值，第一个值X轴，第二个值Y轴。
旋转：rotate（）单位deg,顺时针，正值，逆时针，负值。
倾斜：skew（）单位deg,默认第一个值是X轴，第二个是Y轴。
复合写法：transform:translateX(100px) scale(2) skewX(15deg)
变化基准点：transform-origin: 单位：px % left right top bottom center。第一个值代表X轴，第二个Y轴，只有一个值另一个值默认居中。
3D变换：
视距/景深 prespective 加给父元素或body 600px ~ 2000px取值；
代表眼睛到屏幕的距离 ，值越大，距离越远。目的让子元素保留近大远小的效果。
transform : rotateX(...deg)
transform : rotate3d(x,y,z,deg)x,y,z可取值0，1，-1。0：不旋转，1：顺时针旋转，-1：逆时针旋转。
transform-style : preserve-3d。加给父元素，让子元素保留3D效果。
3，关键帧动画：
定义动画：
@keyframs change{
from{}
to{}
}
调用动画：
animation-name:动画名字；
animation-duration:动画时间；
animation-timing-function:速度变化曲线；
animation-delay：动画延迟时间；
animation-interation-count:动画执行次数；（infinite：这是循环无线次；fill-mode: forwards==停在终点；不写回到原点）
animation-direction：动画方向；alternate（反向运动）
复合写法：anmation:name duration timing-function delay interation-count direction forwards
动画状态：animation-play-state:running=>执行状态；animation-play-state:paused=>暂停状态。