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=>暂停状态。