首頁  >  文章  >  web前端  >  CSS3的屬性transition、animation、transform

CSS3的屬性transition、animation、transform

php中世界最好的语言
php中世界最好的语言原創
2018-03-21 14:55:422042瀏覽

這次帶給大家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,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%的時候。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

css如何做出0.5像素的線條

#css3的Transition平滑過渡選單列實作

以上是CSS3的屬性transition、animation、transform的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn