CSS3 Animation Part.2(학습 36일차 TIL)

210728 animation 효과를 더욱 구체적으로 학습했다.

animation tips

• keyframes 구간을 짧게 줌으로써 눈을 깜빡하는 모션이라던지, 순간에 일어나는 효과를 구현할 수 있다.

@keyframes hair-movement {
  0% {transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}

  28% {transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}
  30% {transform: rotate3d(0, 1, 0, 90deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}
  32% {transform: rotate3d(0, 1, 0, 0deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}

  63% {transform: rotate3d(0, 1, 0, 0deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}
  65% {transform: rotate3d(0, 1, 0, 90deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}
  68% {transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}

  100% {transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}
}
/* Y축을 기준으로 일정구간에서 순간 회전하면서 입체적으로 보여지는 animation */

CSS tips

• 콘텐츠를 가운데로 오게 하기 위해서 left: calc(50% - 30px); 또는 transform: translate3d(-50%, -50%, 0);를 이용할 수 있다.
• box-shadow: 2px -9px 0 1px(spread) #fff;에서 spread는 값에 따라 확장 or 축소 할 수 있다.