Css-transition、animation(animate)動畫效果

參考資料：
Day27：小事之 Transition 與 Animation
範例

Transition

轉場是從 A 狀態，轉變成 B 狀態，中間的過程，就叫轉場
只能定義起始狀態跟結束狀態，中間狀態不能設定
圖片來源：Day27：小事之 Transition 與 Animation
有下列幾個屬性：
1.transition-property(屬性) EX：width、height
2.transition-duration(時間)
3.transition-timing-function(特效) EX：ease-out
4.transition-delay(延遲)
預設值：all 0 ease 0

使用時機

常用於滑鼠事件（:hover、:active、:focus、click）或鍵盤輸入時觸發
範例

注意：transition效果是寫在原本A狀態
而變化後的屬性則是寫在B狀態中如：.header:hover {height:200px}
範例

.header{
width:100px;
height:50px;
background:green;
border:1px solid red;
transition:width 3s ease-out 1s;
transition:height 1s; //一秒
}
.header:hover{
width:200px;
height:100px;
}

Q：是不是不能同時設定改變多個屬性質? EX：width、height等
A：分開寫不就好了

補充：transition 搭配 transform 範例
參考資料：
Ｗ3cschool
CSSTransition 轉場效果

animation(動畫效果)

可以自行撰寫動畫開始、進行間、結束時各階段的變化，適合用來做較細微的動畫表現。但需要明確的指定關鍵影格(@keyframes)的參數。
目前多會直接使用animate.css套件，詳情可以看
jquery ch5-33 或官網
animate用法介紹： pjchen

語法如下：範例

.box{
animation: change 5s ; //八個屬性中至少要有名稱（自行命名）、時間

//正常會寫成這樣
animation: change 5s linear 2s infinite alternate;
}

//設定多個狀態，可以非常詳細

@keyframes change{
0%{ background: #4BC0C8;}
20%{ background: #C779D0;}
60%{ background: #FEAC5E;}
80%{ background: #185a9d;}
100%{ background: #4BC0C8;}
}

載入animate.css語法

使用方式：
1.在head裡面插入連結

<head>
<meta charset="UTF-8">
<title>Animate.css </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>

2.在想進行動畫的元素上加上class，一定要先加 animated 再加上要使用的動畫名稱（注意大小寫），如果想要動畫一直動作可以加上 infinite。範例

<body>
    <h1 class="animated fadeIn">我是LOGO</h1>
    <h2 class="animated infinite jello">INFINITE</h2>
</body>

animate與transition比較

圖片來源：Day27：小事之 Transition 與 Animation

差異點

tansition 是當參數改變時觸發，而 animations 則是直接就執行，所以動畫效果需要明確的指定關鍵影格的參數。