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

昨天做了哀怨鬼的樣子以後，
今天要讓它動起來啦～

下面只有貼上動畫的CSS～，完整Codepen在這裡，動畫說明直接寫在註解。

@keyframes updown {   /* --- 上下飄動 --- */
  0% {
    top: 10%;
  }
  50% {
    top: 20%;
  }
  100% {
    top: 10%;
  }
}
@keyframes shadow {  /* --- 影子隨著飄動放大縮小 --- */
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.3, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes sleepy {  /* --- 沈重的眼皮開闔 --- */
  0% {
    height: 50px;
    border-radius: 50px 50px 0 0;
  }
  50% {
    height: 60px;
    border-radius: 60px 60px 0 0;
  }
  70% {
    height: 40px;
    border-radius: 40px 40px 0 0;
  }
  100% {
    height: 50px;
    border-radius: 50px 50px 0 0;
  }
}
@keyframes body { 
/* --- 身體隨著飄動大小變化，這裡因為身體形狀較特殊，是用border-radius控制形變 --- */
  0% {
    border-radius: 180px 100% 5px 100%;
  }
  50% {
    border-radius: 180px 80% 20px 80%;
  }
  100% {
    border-radius: 180px 100% 5px 100%;
  }
}
@keyframes move {    /* --- 身體左右飄動，及忽隱忽現動畫 --- */
  0% {    
    transform: translate3d(10px, 0, 10px);
    opacity: 1;
  }
  50% {
    opacity: .3;
  }
  60% {
    opacity: 0.1;
  }
  100% {
    transform: translate3d(200px, 0, -100px);
    opacity: 1;
  }
}
@keyframes hat {   /* --- 帽子隨著飄上飄下的形變 --- */
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1, 0.9);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes look {   
/* --- 眼珠的在眼球的移動及放大，利用transform的傾斜效果，會讓眼球更有球體效果 --- */
  0% {
    transform: none;
  }
  20% {
    transform: translateX(-18px) translateY(23px) skewX(15deg) skewY(-10deg) scale(0.95);
  }
  25%, 44% {
    transform: none;
  }
  50%, 60% {
    transform: translateX(18px);
  }
  70% {
    transform: scale(1.3);
  }
  66%, 100% {
    transform: none;
  }
}

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

• 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