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- 格式類似 */