全面比較CSS3與動畫有關的屬性transition、animation、transform-css教學-PHP中文網

全面比較CSS3與動畫有關的屬性transition、animation、transform

小云云

發布： 2017-12-12 09:39:32

原創

1655 人瀏覽過

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%的時候。