這次帶給大家CSS3的屬性transition、animation、transform，使用CSS3屬性transition、animation、transform的注意事項有哪些，以下就是實戰案例，一起來看一下。
最近應公司需求，需要用css3做動畫，終於把以前一直傻傻分不清楚的三個屬性理解了。
索性在這裡進行一個簡單的對比，加深自己的記憶。
瀏覽器相容性
#CSS3 transform 屬性
Internet Explorer 10、Firefox、Opera 支援transform 屬性。
Internet Explorer 9 支援替代的 -ms-transform 屬性（僅適用於 2D 轉換）。
Safari 和 Chrome 支援替代的 -webkit-transform 屬性（3D 和 2D 轉換）。
Opera 只支援 2D 轉換。
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 */
CSS3 animation 屬性
Internet Explorer 10、Firefox 以及Opera支援animation 屬性。
Safari 和 Chrome 支援替代的 -webkit-animation 屬性。
註解：Internet Explorer 9 以及更早的版本不支援 animation 屬性。
用法：
animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
#CSS3 transition 屬性
#Internet Explorer 10、Firefox、Opera 和Chrome 支援transition 屬性。
Safari 支援替代的 -webkit-transition 屬性。
註解：Internet Explorer 9 以及更早版本的瀏覽器不支援 transition 屬性。
用法：
transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s;
#其他比較
##transition和animation屬於動畫屬性，transform屬於靜態屬性。 根據英文單字的理解：轉換，變換，transform主要指位移、大小、位置、形狀的轉換，直接寫該屬性變換，得到的就是變換後的形狀和位置。
transition和animation因為都屬於動畫屬性，所以都具有以下
property
duration
timing-function
delay
animation-
direction 一個要定義動畫播放的次數，一個為定義動畫是否輪流反向播放
簡寫形式對比：
#transition屬性：過渡，即css變化的過程的過渡，所以定義transition屬性的意義為，當定義過transition的屬性，發生了變化，都會按照這個過渡的動畫進行轉變，而不是生硬的直接轉變，這樣就為動畫提供了很好的方式。一般我們寫:-webkit-transition:all 0.85s ease-in 0.1s;
-o-transition:all 0.85s ease-in 0.1s;
-moz-transition:all 0.85s ease -in 0.1s;
transition:all 0.85s ease-in 0.1s;
all代表這所有屬性的變化都會按照這個過渡進行變化
animation寫法：
-webkit-animation: tang1 0.5s ease 0s infinite alternate;
animation: tang1 0.5s ease 0s infinite alternate;
簡寫形式，animation後面多了動畫次數和是否輪流反向播放
@keyframes tang1
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes tang1 /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}from代表0%的時候，to 代表100%的時候。
推薦閱讀：
以上是CSS3的屬性transition、animation、transform的詳細內容。更多資訊請關注PHP中文網其他相關文章！
