transition、animation、transform有時候分不清楚,本文主要介紹CSS3與動畫有關的屬性transition、animation、transform對比,通過瀏覽器安全色性,用法和對比更深刻的展示了彼此之間的異同,具體操作步驟大家可查看下文的詳細講解,感興趣的小夥伴們可以參考一下,希望能協助到大家。
瀏覽器安全色性
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,property變成了動畫的名稱animation專屬的屬性有:
animation-iteration-count
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後面多了動畫次數和是否輪流反向播放
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%的時候。