CSS로 만드는 왼쪽 아래 회전 퇴장(rotateOutDownLeft) 애니메이션 효과

CSS의 @keyframes와 animation 속성을 활용하면 요소가 화면에서 사라질 때 왼쪽 아래를 축으로 회전하며 퇴장하는 rotateOutDownLeft 애니메이션 효과를 쉽게 구현할 수 있습니다.

핵심 개념 이해하기

이 애니메이션이 동작하는 원리는 다음과 같습니다.

transform-origin: left bottom — 요소의 왼쪽 아래 모서리를 회전의 기준점(축)으로 지정합니다.
transform: rotate(90deg) — 요소를 시계 방향으로 90도 회전시켜 화면 밖으로 넘어가게 합니다.
opacity: 1 → 0 — 회전이 진행되는 동안 요소가 서서히 투명해지며 자연스럽게 사라지도록 만듭니다.

전체 예제 코드

아래 코드를 실행하면 로고 이미지가 왼쪽 아래를 축으로 회전하면서 화면에서 페이드아웃되는 것을 확인할 수 있습니다. 'Reload page' 버튼을 클릭하면 페이지가 새로고침되어 애니메이션을 다시 볼 수 있습니다.

<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: 10s;
            animation-duration: 10s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
         }
         @-webkit-keyframes rotateOutDownLeft {
            0% {
               -webkit-transform-origin: left bottom;
               -webkit-transform: rotate(0);
               opacity: 1;
            }
            100% {
               -webkit-transform-origin: left bottom;
               -webkit-transform: rotate(90deg);
               opacity: 0;
            }
         }

         @keyframes rotateOutDownLeft {
            0% {
               transform-origin: left bottom;
               transform: rotate(0);
               opacity: 1;
            }
            100% {
               transform-origin: left bottom;
               transform: rotate(90deg);
               opacity: 0;
            }
         }
         .rotateOutDownLeft {
            -webkit-animation-name: rotateOutDownLeft;
            animation-name: rotateOutDownLeft;
         }
      </style>
   </head>

   <body>
      <div id = "animated-example" class = "animated rotateOutDownLeft"></div>
      <button onclick = "myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

코드 설명

1. 기본 스타일 (.animated)

.animated 클래스는 배경 이미지를 설정하고, animation-duration: 10s로 애니메이션 전체 재생 시간을 10초로 지정합니다. 또한 animation-fill-mode: both를 적용해 애니메이션이 시작 전과 종료 후에도 해당 프레임의 스타일 상태를 유지하도록 합니다.

2. 키프레임 정의 (@keyframes)

@keyframes rotateOutDownLeft 블록에서 애니메이션의 시작(0%)과 끝(100%) 상태를 정의합니다. 시작 시점에는 요소가 제자리에 있으며(opacity: 1), 종료 시점에는 90도 회전한 상태에서 완전히 투명해집니다(opacity: 0).

참고로 -webkit- 접두사가 붙은 코드는 구버전 Safari 등 웹킷 기반 브라우저와의 호환성을 위한 것이며, 최신 브라우저에서는 표준 문법인 @keyframes와 animation-name만으로도 정상적으로 동작합니다.

3. 애니메이션 적용 (.rotateOutDownLeft)

.rotateOutDownLeft 클래스는 animation-name 속성을 통해 위에서 정의한 키프레임을 요소에 연결합니다. HTML에서 <div>에 두 클래스를 함께 지정하면 애니메이션이 자동으로 실행됩니다.

활용 팁

재생 시간을 조절하려면 animation-duration 값을 변경하세요. 예를 들어 2s로 설정하면 더 빠르게 사라지는 효과를 얻을 수 있습니다.
회전 각도를 바꾸고 싶다면 rotate(90deg)의 값을 조정하면 됩니다.
페이지 로드 시 자동 실행 대신 버튼 클릭 등 특정 이벤트에서 애니메이션을 트리거하려면 JavaScript로 클래스를 추가·제거하는 방식을 활용할 수 있습니다.