本篇Demo動畫是較為簡單的線性運動，因此純以CSS來製作：

(1) animation屬性: [name(自訂)] [duration:3s] [timing-function:linear] [animation times:infinite]

(2) 若須要進行重複來回的動作則可以使用direction:alternate來取代linear.

(3) @keyframes - 設定動畫在duration內的動態變化,除了設定from/to元素的起始與終止位置，也用0%-25%-50%-75%-100%, 四個階段來改變熱茶冒煙的濃淡變化。

CSS position屬性:absolute.(後面文字的div也是)

而z-index設定成最大使其顯示在最上層。

(1) 考量使用者體驗因素：Demo卡片設計成當使用者一旦關閉視窗之後，即使重新整理頁面或再次返回該頁面時，卡片也不會再次出現，以避免讓使用者切換瀏灠頁面時須要重複關閉視窗。

(2)session storage(本篇Demo使用)： 生命週期為網頁(或分頁)被關閉與否,雖然卡片不會重複出現，而當使用者重新開啟網頁時，依然會再顯示。
local storage：生命週期較長，除非使用者自己清掉網頁cache，否則browser將會一直記住key,value.

(3)用關閉視窗(close按鈕)時的onclick事件來註冊一個handler,此handler除了將卡片的display屬性指定為none,同時也建立一個session storage的key,value=none.