CSS 有一些新的属性，可以简化代码的书写，用简单的代码就可以实现复杂的变化。不用像 js 那样，需要写很多代码

这里主要介绍三个属性：transition ,transform,以及translate

1. transition: 允许属性在一定时间内进行过渡

规则： transition:property duration timing-function delay;

property--->属性值，例如width,height,background-color等，默认值为all

duration---->过渡时间，必须有单位，如5s,1000ms 等,默认值为0s

timing-function---->过渡效果，如 linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n); 默认为ease;

delay--->过渡延迟时间，默认为0s

可以分开写：

1  2    3    4       
      5        6       51  52  53     
     
       54       
      
55     
     
56  57  

也可以合起来将4个属性写在一起

1  2    3    4       
      5        6       36  37  38     
     
       39       
      
40     
     
41  42  

运行结果：

要改变多个属性时候，用逗号分开，如：

transition:witdth 2s linear 200ms,background 2s ease 200ms;

 

2.transform :就是变形，改变的意思。主要有几种效果：旋转rotate，扭曲skew，缩放scale，移动translate 以及矩阵变形matrix（还可以细分(2D)对应为X,Y）

规则：transform : none | transform-function 

2.1 旋转rotate 

1  2    3    4       
      5        6       31  32  33     
     
       34       
      
35     
     
36  37  

运行结果：

也可以单独旋转X轴或者Y轴，对应函数rotateX()，rotateY()

2.2 扭曲skew

1  2    3    4       
      5        6       31  32  33     
     
       34       
      
35     
     
36  37  

运行结果：

也可以单独扭曲X轴或者Y轴，对应函数skewX()，skewY()

2.3 缩放scale

1  2    3    4       
      5        6       31  32  33     
     
       34       
      
35     
     
36  37  

运行效果：

也可以单独缩放X轴或者Y轴，对应函数scaleX()，scaleY()

2.4 移动translate 

1  2    3    4       
      5        6       31  32  33     
     
       34       
      
35     
     
36  37  

translate的单位，可以是百分比(相对本身)，也可以是px

运行结果：

也可以单独移动X轴或者Y轴，对应函数translateX()，translateY()

 

2.5 矩阵变形matrix，这部分我自己现在也还没有搞懂，就不说了

不过以上四种一般情况下也够用了

 

2.6 当需要多个属性一起变化时，用空格隔起来就可以了

1  2    3    4       
      5        6       31  32  33     
     
       34       
      
35     
     
36  37  

运行结果：