CSS로 구현하는 힌지(Hinge) 애니메이션 효과 완벽 가이드

CSS 힌지 애니메이션이란?

힌지(Hinge) 애니메이션은 요소가 마치 경첩에 걸려 있는 문처럼 좌측 상단을 기준점으로 회전하다가 결국 화면 아래로 떨어지며 사라지는 효과입니다. CSS의 @keyframes 규칙과 transform, opacity 속성을 조합하면 별도의 JavaScript 라이브러리 없이도 자연스러운 낙하 애니메이션을 손쉽게 만들 수 있습니다.

아래 예제 코드를 실행하여 힌지 애니메이션 효과를 직접 확인해 보세요.

전체 예제 코드

<html>
<head>
<style>
.animated {
  background-image: url(/css/images/logo.png);
  background-repeat: no-repeat;
  background-position: left top;
  padding-top: 95px;
  margin-bottom: 60px;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
  }
  40% {
    -webkit-transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
  }
  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
  }
  100% {
    -webkit-transform: translateY(700px);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    transform: rotate(0);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    transform: rotate(80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  40% {
    transform: rotate(60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(700px);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}
</style>

</head>
<body>

<div id = "animated-example" class = "animated hinge"></div>
<button onclick = "myFunction()">Reload page</button>

<script>
function myFunction() {
  location.reload();
}
</script>
</body>
</html>

핵심 코드 분석

1. 변환 기준점 설정 (transform-origin)

transform-origin: top left;는 회전의 기준축을 요소의 좌측 상단 모서리에 고정합니다. 이 덕분에 요소가 마치 경첩에 매달린 것처럼 위쪽에 걸린 채 흔들리는 듯한 움직임을 연출할 수 있습니다.

2. 단계별 회전 동작 (@keyframes)

애니메이션은 총 5단계로 구성됩니다.

0%: 회전 각도 0도에서 시작합니다.
20%, 60%: 80도까지 회전하며 흔들립니다.
40%: 다시 60도로 줄어들어 되돌아오는 느낌을 줍니다.
80%: 60도 기울어진 상태를 유지하며 떨어지기 직전의 정지 구간입니다.
100%: translateY(700px)로 화면 아래로 떨어지고 opacity: 0으로 서서히 사라집니다.

3. 타이밍 함수 (animation-timing-function)

ease-in-out은 애니메이션의 시작과 끝을 부드럽게 처리해 줍니다. 덕분에 회전 동작이 기계적이지 않고 실제 물리적인 흔들림처럼 자연스럽게 보입니다.

4. 벤더 프리픽스 (-webkit-)

Safari 등 구형 WebKit 기반 브라우저와의 호환성을 위해 -webkit- 접두사가 붙은 코드를 함께 작성했습니다. 최신 브라우저에서는 표준 @keyframes만으로도 충분하지만, 더 넓은 호환성이 필요하다면 두 버전을 모두 유지하는 것이 좋습니다.

마무리

힌지 애니메이션은 요소를 화면에서 재미있게 제거하고 싶을 때 활용하기 좋은 효과입니다. 회전 각도나 translateY 값, 지속 시간(animation-duration)을 조절하면 원하는 분위기에 맞게 커스터마이징할 수 있습니다. 페이지를 새로고침하는 'Reload' 버튼을 눌러 애니메이션을 반복해서 확인해 보세요.