CSS3常用属性及用法

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 转换。