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 轉(zhuǎn)換）。

　　　　Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉(zhuǎn)換）。

　　　　Opera 只支持 2D 轉(zhuǎn)換。

?

轉(zhuǎn)載于:https://www.cnblogs.com/Neilisme/p/7272942.html

總結(jié)

以上是生活随笔為你收集整理的CSS3常用属性及用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。