關於transition和animation的區別
阿新 • • 發佈：2018-11-06
transition和animation都是可以做出動畫效果的css3的元素，剛剛開始接觸，覺得既然都是可以做動畫效果不可能是沒有區別的，一定有各自的獨到用處。
先來看看transition，transition是css3的過渡元素，它擁有以下屬性，如下表：
上表顯示了過渡的全部屬性，及其用法。好像也沒有與今天的主題太搭上邊，下面開始表演。transition過渡屬性有以下幾個特性：
- 過渡屬性只有當滑鼠經過時候才會作用
- 過渡屬性沒有中間的過程，動畫是一步到位
- 過渡屬性一次滑鼠經過只可以發生一次，不能重複發生動畫
以上可以看的出來transition擁有自己的不足之處，animation就是為了補足過渡元素的不足的。但是同樣transition過渡也是擁有自己的好處，它可以對一些動畫起到潤滑的作用，不至於讓一些簡單的動畫看起來那麼生硬，下面舉個栗子：
來寫一個按鈕動畫，相關程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>動態按鈕用transition來過渡</title> <style> .button{ border:none; background-color:red; color:white; padding:15px 20px; font-size:15px; cursor:pointer; border-radius:5px; width:150px; } .button span{ position: relative; display: inline-block; transition: .5s; } .button span::after{ content: "»"; opacity:0; right:-20px; position: absolute; } .button:hover span{ padding-right: 25px; } .button:hover span:after{ opacity: 1; right: 0; transition: .5s; } </style> </head> <body> <button class="button"><span>我是按鈕</span></button> </body> </html>
這樣可以很好的看出按鈕的動畫效果過渡的很自然，因為有transition這個過渡元素，所以對於簡單的動畫就有著其過渡的效果。
再來看看animation動畫效果，先看下錶：
上表顯示的是animation的全部的元素屬性，annimation有下面的 特點：
- 動畫是一幀一幀的繪製的
- 可繪製複雜動畫
- 需要配合@keyframes來使用
下面來舉個栗子說明：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>變色</title> <style> div { width:100px; height:100px; background:red; animation:myfirst 3s; } @keyframes myfirst { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } </style> </head> <body> <div></div> </body> </html>
上面的程式碼展示了animation的用法的特點，支援多幀動畫效果。
不足之處，請多多指教。