CSS動畫-範例(二)：萬聖節快樂！：目 (3)

嘿嘿！你以為就這樣嗎？
原本要撐到萬聖節的，
但好像沒梗了，只能今天po了
寫鐵人寫得這麼哀怨，笑一笑也是不錯，
順便做一個嚇人又可愛的動畫嚇嚇你的朋友吧～
祝他(她)萬聖節快樂吧！嘿嘿嘿～
完整CodePen在這裡，檔案太大，動畫有點慢請不要介意QQ

來看看這次新增哪些動畫吧～完整CodePen連結在這裡

@keyframes move{    /* --- 由遠到近的動畫--- */
  0%{
  top:0%;
  opacity:0.1;
  transform:scale(0.3,0.3);
  }
  90%{
  top:2%;
  opacity:1;
  transform:scale(1,1);
  }
  100%{
  top:20%;
  opacity:1;
  transform:scale(3,3);
  }
}

@keyframes scared{  /* --- 眼球變大--- */
  0%{
  transform:scale(1,1);
  }
  90%{
  transform:scale(1,1);
  }
  100%{
  transform:scale(3,3);
  }
}
@keyframes scared2{  /* --- 眼球變大時，眼皮隱藏--- */
  0%{ 
  
  }
  90%{
  visibility:hidden;
  z-index:1000;
  }
  100%{
  visibility:hidden;
  z-index:1000;
  }
}

@keyframes appear{  /* --- 字顯示--- */
  from{
  opacity:0; 
  font-size:50px;
  top:20%;
  left:100px;
  }
  to{
  opacity:1;
  font-size:60px; 
  top:20%;
  left:100px;
  }
}

如果忘記了之前學的東西，沒關係來複習一下吧！

• Transition
• Animation(ㄧ)概述
• Animation(二)(name/duration/delay/timing-function)
• Animation(三)(iteraction-count/direction/fill-mode/play-state)
• Animation(四)(keyframes)
• 2DTransform
• 3DTransform

～不專業學習筆記，如有疑問或是錯誤，歡迎不吝指教～

參考來源：
[1]https://webdesign.tutsplus.com/articles/pure-css-animation-inspiration-on-codepen--cms-30875
[2]https://codepen.io/donovanh/pen/iBolr
[3]https://codepen.io/juliangarnier/pen/hzDAF