在設計網頁時通常會加一些動畫特效，吸引使用者的目光及添加與使用者的互動性。
過去製作動畫時以Flash為主，CSS3也可以建立動畫，不再只能用JavaScript或jQuery 才做得到了

transition 漸變

transition-duration漸變效果時間

• time：可以設定秒(s)或毫秒(ms)，如果有多個屬性要分開執行，要用逗號隔開

transition-property漸變效果屬性

transition-property: none|all|property;

• none：不會產生漸變效果
• all：所有屬性會有漸變效果
• property：設定有漸變效果的名稱，有多個屬性用逗號隔開

<h1>test</h1>

h1{
	height:100px;
	background-color:yellow;
	transition-property:color,background,height;
	transition-duration:3s;
}
h1:hover{
	color:red;
	background-color:green;
	height:300px
}

transition-delay漸變時間延遲

transition-delay: time;

• time：設定延遲時間，單位可以是秒(s)或毫秒(ms)，

transition-timing-function漸變速度

transition-timing-function: value;

• ease：預設值，低速開始，加快，結束減速
• ease-in：低速開始
• ease-out：低速結束
• ease-in-out：低速開始，低速結束
• linear：均速
• cubic-bezier(x1,y1,x2,y2)：利用貝茲曲線自定義速度模式

以下推薦兩個設定cubic-bezier不錯的網站給大家參考

• 自訂曲線：建立曲線，創造動畫不同的執行速度
  
• Easing Functions：這網站列出很多已經建好的函式形式，可以直接套用
  

transition簡易寫法

順序為：

transition: property duration timing-function delay | initial | inherit

.box{
	width:100px;
	height:100px;
	background:blue;
	transition:width,height 3s;
	-moz-transition:width,height 3s; /* Firefox 4 */
	-webkit-transition:width,height 3s; /* Safari and Chrome */
	-o-transition:width,height 3s; /* Opera */
}
.box:hover{
	width:400px;
	height:300px;
}

animation 動畫

使用時要再加上前綴，讓屬性在每個瀏覽器能夠支援

-moz-     /* firefox瀏覽器 */
-webkit-  /* Safari, google瀏覽器 */
-o-       /* Opera瀏覽器(早期) */
-ms-      /* Internet Explorer  */

animation-name 動畫名稱

animation-name是設定@keyframes動畫名稱

animation-name: keyframe動畫名稱

要與animation-duration屬性搭配，不然動畫不會執行

animation-duration 動畫時間

animation-duration: time;

• time：完成動畫所需完成時間。可以設定秒(s)或毫秒(ms)，如果有多個屬性要分開執行，要用逗號隔開

animation-direction 動畫方向

animation-direction: normal|alternate;

• normal：預設
• reverse：反向
• alternate：正向，再反向(奇數正常播放，偶數反向播放)
• alternate-reverse：反向，再正向

animation-delay 動畫延遲時間

animation-delay: time;

• time：可以設定秒(s)或毫秒(ms)

animation-duration 和 animation-delay前者是動畫持續時間，後者為動畫延遲時間

animation-timing-function

動畫的速度曲線

animation-timing-function: value

• ease：預設值，低速開始，加快，結束減速
• ease-in：低速開始
• ease-out：低速結束
• ease-in-out：低速開始，低速結束
• linear：均速
• cubic-bezier(x1,y1,x2,y2)：利用貝茲曲線自定義速度模式

animation-iteration-count動畫次數

animation-iteration-count: number |infinite

number：播放次數，預設是1，0的不會執行

inifinite：無限次數執行

animation-play-state 動畫執行或暫停

animation-play-state: paused|running

• running：預設，動畫是執行狀態
• paused：動畫暫停

animation-fill-mode動畫延遲與完成

• none：預設，無樣式
• forwards：動畫完成後，保持最後關鍵影格樣式
• backwards：動畫在延遲時，保持最初動畫關鍵影格
• both：遵照forwards及backwards，動畫在延遲時，保持最初動畫關鍵影格樣式。動畫完成後，保持最後動畫關鍵影格樣式

animation簡易法

順序為：

animation: name duration timing-function delay iteration-count direction;

<div class="box"></div>

.box{
	width:100px;
	height:100px;
	background:orange;
	position:relative;
	animation:mymove 5s infinite;
	-webkit-animation:moveBox 5s infinite; /*Safari and Chrome*/
}

@keyframes movebox{
	from {left:0px;}
	to {left:200px;}
}
 /*Safari and Chrome*/
@-webkit-keyframes movebox{
	from {left:0px;}
	to {left:200px;}
}

@keyframes 關鍵影格

@keyframes animationname {
	keyframes-selector {
		css-styles;
	}
}

• animationname：影格名稱
• keyframes-selector：可以使用百分比(0%-100%)、from-to(from與0%相同、to與100%相同)
• css-styles：CSS屬性

搭配frome-to來做動畫設定

.box{
	position:relative;
	animation:moveBox 5s infinite;
}
@keyframes moveBox{
	from {top:0px;}
	to {top:200px;}
}

搭配百分比來做動畫設定

.box{
	position:relative;
	animation:moveBox 5s infinite;
}
@keyframes moveBox{
	0% {background: red;}
  50% {background: green;}
  100% {background: blue;}
}

CSS動畫特效庫

除了自己寫動畫，網路上也有CSS 的動畫特效庫

Animation.css

需要引入css檔案，安裝方式有兩種

方法一：CDN方式

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

方法二：npm或yarn

npm

npm install animate.css --save

yarn

yarn add animate.css

下載完後再import

import "animate.css"

只要在標籤元素添加class名稱animate__animated以及任一動畫名稱如 animate__bounce（記得前綴 animate__！）就會有效果了

<h1 class="animate__animated animate__bounce">An animated element</h1>

Animista

裡面提供數十種的淡入、淡出、旋轉等效果，不需要額外引入JS，只要選好自己的樣式後，點選右上角的 {‧} 按鈕，檢視原始碼，把他複製到你的檔案裡面了

結論

介紹了漸變與動畫，你一定會問他們兩者之間有什麼差別，transition是需要被觸發才會執行，像是滑鼠移入(hover)效果，animation則是直接就執行。。