CSS3的 transition属性、transform属性，怎么才能让他同时执行多个不同的过渡、动画（变换属性）效果

1、如果要给一个Dom(html标签)元素，同时设置多个不同的CSS过渡(transition)属性值时，

在各个属性值之间用逗号(英文,) 隔开即可！！

2、如果要给一个Dom(html标签)元素，同时设置多个不同的CSS变换(transform)属性值时，

在各个属性值之间用空格 隔开即可！！ 

具体实例代码：

div{
    width: 100px; 
    height: 100px; 
    color: green;
    background: blue; 

    <!--这里是设置所有属性过渡时间-->
    transition: all 1s; 
    
    <!--这里是分别指定设置：width、color、transform 三个样式属性的过渡！-->
    transition: width 1.5s ease, color 0.8s, transform 1s 0.5s ease-in-out; 
} 


div:hover{

    <!--这里是同时分别设置了：旋转 缩放 扭曲 三个变换属性！-->
    transform: rotate(360deg) scale(2, 2) skew(10deg, 5deg);
} 

 

注意1：在设置transition的属性值时，只能设置可以连续变化(如：widht, height, color, opacity, font-size等)属性！

        如果设置(display, position等)这种指定的，不能连续变化的属性时，在transition中没有过渡效果的哦！！

 

 

注意2：当给dom元素同时设置多个变换transform属性时它们的执行顺序！

        顺序：是从后向前执行的哦！！

例如：

transform: rotate(360deg) scale(2,2) skew(10deg,5deg);

在上面变换属性中会先执行skew(10deg,5deg)  再执行 scale(2,2) 最后再执行 rotate(360deg)

所以：顺序不同变换效果也会不同！！！