css3类的顺序对过渡效果的影响

对一个元素应用多个过渡效果，总的来说一句话：过渡效果的类应按过渡的出现顺序排列。否则，后面的类会覆盖掉前面的类。

例子1：按出现的先后顺序放置

        .animate1{            transform:rotate3d(0,0,1,90deg) skew(-15deg,0deg);            transition:transform 2s;        }        .animate2{            transform:rotate3d(0,0,1,180deg) skew(0deg,15deg);            transition:transform 2s;        }

效果

例子2：不按顺序放置

       .animate2{            transform:rotate3d(0,0,1,180deg) skew(0deg,15deg);            transition:transform 2s;        }        .animate1{            transform:rotate3d(0,0,1,90deg) skew(-15deg,0deg);            transition:transform 2s;        }

效果

当animate1和animate2同时加到一个元素上时，transform属性会被覆盖掉，所以，要按效果添加的顺序排列过渡效果类。