svg動畫 3種製作動畫的方式

1. 針對屬性作動畫

values="欲變化的數值；數值；數值"---->使用分號

repeatCount="次數"---->若欲無限，輸入indefinite

begin可以讓動畫延遲，秒數用負的表示0秒前就已開始動畫，解決會停頓的問題(參照#pic4)

2. 位移動畫

將欲位移的元素運用"group"包起來

type可填入scale、rotate等等

3. CSS動畫

transform-origin控制動畫開始或消失的點

chrome讓動畫消失會以整個為基準，要輸入"transform-box: fill-box"讓動畫以該元素為基礎

後寫的會蓋掉前面的，以#pic5的
      &:hover
         & .frame_outer....為例，
     若沒有輸入"transition-delay: 0s"那他會直接套用"transition-delay: 0.5s"

codepen 各種快捷鍵

https://codepen.io/adamlin/embed/OXEBNY/?height=265&theme-id=0&default-tab=html,result&embed-version=2

運用hover 顯示文字

https://ithelp.ithome.com.tw/articles/10194321



1. opacity: 0  透明度=0