css過渡和css動畫的區別是什么？

css3中出現很多新的特性，其中比較好玩的3D操作就是：過渡和動畫效果。那么css過渡和css動畫的區別是什么？下面本篇文章就來給大家介紹一下CSS中過渡和動畫的區別，希望對大家有所幫助。

 

 

css過渡和動畫的區別：

animation屬性類似於transition，他們都是隨着時間改變元素的屬性值，那么區別是什么？

其主要區別在於：transition需要觸發一個事件才會隨着時間改變其CSS屬性；animation在不需要觸發任何事件的情況下，也可以顯式的隨時間變化來改變元素CSS屬性，達到一種動畫的效果。

1）動畫不需要事件觸發，過渡需要。

2）過渡只有一組（兩個：開始-結束） 關鍵幀，動畫可以設置多個。

廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com

過渡(transition)

過渡就是使瞬間的樣式變化，按照一定方式變得緩慢平緩；

例如鼠標划過超鏈接時顏色的變化，點擊按鈕后的顏色變化等，默認轉化都是瞬間完成，可能你已經習慣了這種變換，但有時候平緩一些看着還是比較舒適的；

要實現樣式的過渡變化，那么首先就學要有樣式變換，例如鼠標划過，單擊按鈕，點擊圖片等操作，來實現顏色，尺寸，位置等樣式的變化；

下面是鼠標划過段落使文本變紅的操作，應用所有 transition屬性：

p:hover { color: red; } p { transition-property: color; transition-duration: 2s; transition-timing-function: linear; transition-delay: 0; }

一共四個值，功能基本都是字面翻譯的意思：

transition-property

執行過渡的屬性，例子設置為顏色color的變化，也可以是width, font-size等，不設置的話默認是all，即所有屬性；

transition-duration

過渡的時間，單位是秒，如1s, 2.3s，不設置的話默認 0s，即無過渡效果；

transition-timing-function

設置過渡時的變化方式，默認是 ease，即速度由慢到快再到慢，常用的還有 linear，線性變化速度均勻，還有其他幾個方式，過渡時間短的話看不出什么區別；

transition-delay

延遲時間，即多少秒后執行過渡效果，默認 0s，不延遲；

當然這么多單詞可能記不住，一般使用快捷寫法：

p { transition: color 2s linear 0; } /*最少要指定過渡時間*/ p { transition: 2s; }

也可以設置每個樣式分別過渡，例如：

p { transition: color 2s linear, font-size .5s, background: 1s; }

每個樣式過渡之間用逗號隔開就行了；

最后，由於是新特性，為了兼容性需要加上瀏覽器廠商前綴：

p { transition: 2s; -webkit-transition: 2s; -moz-transition: 2s; -ms-transition: 2s; -o-transition: 2s; }

 

動畫(animation)

CSS3的動畫是個很不錯的技術，基本能取代一些動圖，JavaScript，flash等；

而動畫里最重要的概念就是關鍵幀，也許你用PS做gif動圖的時候看見過這個概念，所謂動畫就是一幀一幀圖片連續切換實現的效果，關鍵幀就是里面主要的一些幀；

實現CSS動畫也需要設置關鍵幀 @keyframes：

@keyframes my-animation { 0% { color: red; } 50% { color: green; } 100% { color: blue; } }

格式如上，@keyframes后面跟的是自定義的動畫名稱，后面會用到。里面的0%，50%，100%便是設置的三個關鍵幀及其對應樣式，如果只需要設置首尾兩個關鍵幀，可以這樣寫：

@keyframes my-animation { from { color: green; } to { color: blue; } }

當然樣式除了color還能設置多項樣式；

定義好關鍵幀后就直接在需要應用動畫的元素標簽內使用就行了，格式及所有屬性如下：

p { animation-name: my-animation; animation-duration: 3s; animation-timing-function: ease; animation-delay: 0; animation-iteration-count: 3; animation-direction: normal; animation-play-state: running; }

發現了吧，很多屬性和transition里面一樣，簡單介紹下：

• animation-name

就是之前跟在@keyframea后面的自定義名稱，之前設置的是 my-animation;

• animation-duration

• animation-timing-function

• animation-delay

和前面一樣，默認分別為 0, ease, 0；

• animation-iteration-count

動畫播放的次數，默認 1，但一般設置為 infinite，即無限循環；

• animation-direction

動畫播放的方向，normal為默認，正向播放，reverse為反向播放，alternate為正向后反向，alternate-reverse為反向后正向；

• animation-play-state

播放狀態，默認 running，運行，paused為暫停，可以在JavaScript中使用對動畫進行控制；

當然，這個屬性比之前的transition還多，也有簡便寫法：

p { animation: my-animation 3s linear infinite alternate; }

其中 animation-name 和 animation-duration為必須設置的屬性；

同樣，記得考慮瀏覽器兼容：

@-webkit-keyframes mycanimation { from { color: green; } to { color: blue; } } p { -webkit-animation: my-animation 3s linear infinite; } /* -moz-, -ms-, -o- 格式類似 */