CSS로 Flip In Y(플립 인 Y) 애니메이션 효과 구현하는 방법

CSS의 Flip In Y(플립 인 Y) 애니메이션은 요소가 Y축을 중심으로 회전하면서 화면에 등장하는 입체적인 3D 전환 효과입니다. 카드가 뒤집히듯 자연스럽게 나타나기 때문에 이미지 갤러리, 배너, 로딩 화면 등 다양한 UI에서 활용도가 높습니다.

핵심 속성 이해하기

perspective(400px) : 3D 원근감을 부여하는 값으로, 숫자가 작을수록 회전 효과가 더 극적으로 보입니다.
rotateY() : 요소를 세로 축(Y축) 기준으로 회전시키는 변형 함수입니다.
opacity : 애니메이션 시작 시 투명하게 숨겼다가 끝날 때 완전히 나타나도록 제어합니다.
animation-fill-mode: both : 애니메이션이 시작 전과 종료 후에도 해당 상태의 스타일을 유지하도록 설정합니다.
backface-visibility: visible : 요소가 뒤집히는 동안 뒷면이 보이도록 하여 자연스러운 회전 느낌을 줍니다.

예제 코드

아래 예제는 @keyframes로 flipInY 애니메이션을 정의하고, 클래스를 통해 요소에 적용하는 방식입니다. 버튼을 클릭해 페이지를 새로고침하면 애니메이션을 반복해서 확인할 수 있습니다.

<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 flipInY {
            0% {
               -webkit-transform: perspective(400px) rotateY(90deg);
               opacity: 0;
            }
            40% {
               -webkit-transform: perspective(400px) rotateY(-10deg);
            }
            70% {
               -webkit-transform: perspective(400px) rotateY(10deg);
            }
            100% {
               -webkit-transform: perspective(400px) rotateY(0deg);
               opacity: 1;
            }
         }

         @keyframes flipInY {
            0% {
               transform: perspective(400px) rotateY(90deg);
               opacity: 0;
            }
            40% {
               transform: perspective(400px) rotateY(-10deg);
            }
            70% {
               transform: perspective(400px) rotateY(10deg);
            }
            100% {
               transform: perspective(400px) rotateY(0deg);
               opacity: 1;
            }
         }

         .flipInY {
            -webkit-backface-visibility: visible !important;
            -webkit-animation-name: flipInY;
            backface-visibility: visible !important;
            animation-name: flipInY;
         }
      </style>

   </head>
   <body>

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

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

애니메이션 동작 방식

애니메이션은 총 1초 동안 진행되며, 흐름은 다음과 같습니다.

0% : 요소가 Y축으로 90도 회전된 상태에서 투명도 0으로 시작합니다.
40% : -10도까지 살짝 넘어가며 과장된 회전감을 연출합니다.
70% : 반대로 10도로 튕기듯 되돌아옵니다.
100% : 0도로 돌아오며 완전히 불투명한 상태로 마무리됩니다.

이처럼 중간 지점에서 살짝 넘어갔다가 되돌아오는 바운스(bounce) 효과를 넣으면 단순한 회전보다 훨씬 생동감 있는 결과물을 얻을 수 있습니다. -webkit- 접두사는 구버전 Safari 등 WebKit 기반 브라우저와의 호환성을 위해 함께 작성해 두는 것이 좋습니다.