1.transition: 过渡属性，可以替代flash和javascript的效果

兼容性：Internet Explorer 9 以及更早的版本，不支持 transition 属性。

            Chrome 25 以及更早的版本，需要前缀 -webkit-。

            Safari 需要前缀 -webkit-。

div{transition: width 1s linear 2s;/* Firefox 4 */-moz-transition:width 1s linear 2s;/* Safari and Chrome */-webkit-transition:width 1s linear 2s;/* Opera */-o-transition:width 1s linear 2s;} 公司**圆桌用的是  transition: all .2s ease-out; 2.animation属性

　　兼容性：Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

　　　　　　Safari 和 Chrome 支持替代的 -webkit-animation 属性。

　　　　　　Internet Explorer 9 以及更早的版本不支持 animation 属性。

     公司 脑洞用的是  -webkit-animation: fade_in_left 3s infinite ease-in-out;

                            

@keyframes fade_in_left

{

0% {transform: translateX(-20px);}

50% {transform: translateX(0);}

100% {transform: translateX(-20px);}

}

@-moz-keyframes fade_in_left /* Firefox */

{

0% {-moz-transform: translateX(-20px);}

50% {-moz-transform: translateX(0);}

100% {-moz-transform: translateX(-20px);}

}

@-webkit-keyframes fade_in_left /* Safari 和 Chrome */

{

0% {-webkit-transform: translateX(-20px);}

50% {-webkit-transform: translateX(0);}

100% {-webkit-transform: translateX(-20px);}

}

@-o-keyframes fade_in_left /* Opera */

{

0% {-o-transform: translateX(-20px);}

50% {-o-transform: translateX(0);}

100% {-o-transform: translateX(-20px);}

}

 

3.transform

div{transform:rotate(7deg);-ms-transform:rotate(7deg); 	/* IE 9 */-moz-transform:rotate(7deg); 	/* Firefox */-webkit-transform:rotate(7deg); /* Safari 和 Chrome */-o-transform:rotate(7deg); 	/* Opera */}

兼容性：Internet Explorer 10、Firefox、Opera 支持 transform 属性。

　　　　Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

　　　　Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

　　　　Opera 只支持 2D 转换。