Transition
使用 transition 目的是希望轉換過程是平順。transition: 屬性 動畫時間/轉換時間 延遲時間 速度設定; 也不是每次都會延遲，
<head>
<style>
a {
padding: 10px 20px;
background: black;
text-decoration: none;
color: white;
transition: background 1s 0s ease;
}
.btn:hover {
background: red;
color: #ffa;
}
</style>
</head>
<body>
<a href="#" class='btn'>送出</a>
</body>
以分組概念，進行不同類別的動畫設計，以逗號做為區隔。
transition: background 1s 0s ease, padding 1s 0s ease;
使用 transition 的頻率會比 animation 更高。transition 會加在一開始設定的地方。
Animation
需要搭配 keyframes，多數使用 animation 會搭配程式或與 hover 運用。
animation: 動畫名稱 播放時間 延遲執行的時間 速度 次數 方向 填充模式 播放狀態
Animation : 在哪個角色上執行這個動畫
keyframes : 動畫內容
填充模式 : 在播放的過程中/準備播放，決定它的起點狀態或終點狀態
播放狀態 : 要播放還是要暫停
@keyframes 動畫名稱 {
關鍵影格位置
0%{} 初始狀態
100%{} 結束時間點
}
動畫是很多靜態的物件在連續的時間軸上進行著，假設在零秒鐘的狀態它可能是圓形，到十秒的狀態它是方形的，中間 animation 會自動幫我補上動畫，所以我只需要告訴 animation 在甚麼時間點，它的外型是甚麼樣子即可。以上面的假設為例，在零秒它是圓形，圓形就是它關鍵的形狀、在十秒它是方形，方形就是它關鍵的形狀，而中間的過程會由瀏覽器幫忙做計算。
keyframes 就像劇本/劇情，劇本寫好劇情安排好，誰要去執行這個動畫？這個時候，我們會需要選角。以下方代碼為例進行說明：box2 就像演員，負責執行動畫內容
alternate 方向設定為來回撥放
<!DOCTYPE html>
<html>
<head>
<title>css</title>
<meta charset="urf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="reset.css">
<style>
.box {
width: 200px;
height: 200px;
border-radius: 50%;
background: red;
}
.box1 {
width: 200px;
height: 200px;
border-radius: 50%;
background: red;
animation: amos 2s .3s Infinite alternate;
}
@keyframes amos {
0%{ border-radius: 50%; }
100%{ border-radius: 0%; }
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>
重點回顧：
- animation 的用途：在哪個角色上執行動畫
- animation 值有哪些：
animation: 動畫名稱 播放時間 延遲執行的時間 速度 次數 方向 填充模式 播放狀態 - 動畫跟關鍵影格之間的搭配
@keyframes 動畫名稱 { 關鍵影格位置 0%{} 初始狀態 100%{} 結束時間點 }
