iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 12
1

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;
  }
}

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

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

參考來源:
[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


上一篇
CSS動畫-範例(二):萬聖節快樂!:目 (1)
下一篇
CSS動畫-範例(二):萬聖節快樂!:目 (3)
系列文
30天讓設計師搞定CSS/SVG動畫30

尚未有邦友留言

立即登入留言