过渡与2D形变

1.过渡----transition

①transition-property：all;用来指定可以过渡的属性，例如width、height、background等等。

②transition-duration：0s;用来规定过渡完成所需要的时间，单位是s.

③transition-timing-function：ease；指定完成过渡的动画的类型(就是我们所说的以何种速度变化来完成过渡)。

④transition-delay：0s；指的是延迟多久才开始执行动画，单位是s。

⑤对于transition的四个属性设置，可以有复合写法。写为transition： a   b   c  d;其中a 代表需要进行过渡变化的属性，b代表过渡完成需要的时间，c代表完成过渡的动画类型，d 代表延迟执行过渡的时间；而其中的c 我们可以写linear、ease、ease-in、ease-out、ease-in-out，也可以是贝塞尔曲线，贝塞尔曲线的四个数值我们可以自己调试，这样更有助于我们得到更好的过渡效果。

2. 形变-2D

说到2D形变我们就要提到transform。紧接着是transform的四个属性。

①transform：translateX(0px);/

                       translateY(0px);/

                      translate(0px);

                       translate(0px，0px);

这里表示的依次是在X轴上的偏移量，（我们就称之为位移）；在Y轴上的位移；在X轴和Y轴上的位移的复合写法；注意，这里如果只写translate(0px);将会默认的是在X轴上的位移，在Y轴上没有效果。

②transform：scaleX(0.5);/

                       scaleY(0.5);/

                       scale(0.5);/

                      scale(0.5,0.5);

这里表示的依次是在X轴上的缩放，缩放倍数为0.5；在Y轴上的缩放，缩放倍数为0.5；在X轴和Y轴上缩放的复合写法，当然这里虽然只有一个值，但是默认的代表X轴和Y轴，如果两轴上的缩放倍数不一样，我们也可以写成scale(a,b)。

③transform：rotateX(0deg);

                      rotateY(0deg);

                      rotate(a);

                      rotate(a,b);

这里表示的是一X轴为参照进行偏转；以Y轴为参照进行偏转；当为rotate(a);属性值只有一个的时候，表示绕着元素的中心点进行偏转多少角度；而当为rotate(a,b),是指在X轴和Y轴上分别偏转多少角度。

④transform：skewX(0deg)；

                      skewY(0deg);

倾斜，分别表示在X轴和Y轴上的倾斜角度，这个属性通常用来写平行四边形。

哈哈哈......没有了，下期继续。