키 프레임을 이용한 이미지 마우스 오버 그림자 효과

블로그를 수정하면서 이미지에 키 프레임을 이용한 애니메이션 효과를 줘봤다. 아래 링크는 최대한 스크립트를 사용하지 않고, 간단한 CSS 위주로 괜찮은 효과를 찾기 위해 구글링을 하다가 알게 된 사이트다.

http://animista.net/

TRY ME! 버튼을 클릭하면 작업 페이지로 이동하는데, 최상단에 BASIC, ENTRANCES, EXITS, TEXT 등 총 6개의 카테고리와 바로 밑에 해당 카테고리의 애니메이션들이 있다. 그리고 미리보기 영역 좌측에는 몇 가지 옵션을 선택할 수 있으며, 우측 상단의 소스 아이콘을 클릭하면 해당 코드를 확인할 수 있다.

현재 글 이미지에는 BASIC 카테고리의 SHADOW-POP 애니메이션이 적용된 상태다.

CSS

.shadow-pop-tr {-webkit-animation: shadow-pop-tr 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
        animation: shadow-pop-tr 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;}

KEYFRAME

/* ----------------------------------------------
 * Generated by Animista on 2018-10-8 20:25:48
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shadow-pop-tr
 * ----------------------------------------
 */
@-webkit-keyframes shadow-pop-tr {
  0% {
    box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
  100% {
    box-shadow: 1px -1px #3e3e3e, 2px -2px #3e3e3e, 3px -3px #3e3e3e, 4px -4px #3e3e3e, 5px -5px #3e3e3e, 6px -6px #3e3e3e, 7px -7px #3e3e3e, 8px -8px #3e3e3e;
    -webkit-transform: translateX(-8px) translateY(8px);
            transform: translateX(-8px) translateY(8px);
  }
}
@keyframes shadow-pop-tr {
  0% {
    box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
  100% {
    box-shadow: 1px -1px #3e3e3e, 2px -2px #3e3e3e, 3px -3px #3e3e3e, 4px -4px #3e3e3e, 5px -5px #3e3e3e, 6px -6px #3e3e3e, 7px -7px #3e3e3e, 8px -8px #3e3e3e;
    -webkit-transform: translateX(-8px) translateY(8px);
            transform: translateX(-8px) translateY(8px);
  }
}