CSS만으로 롤아웃(Roll Out) 애니메이션 효과 구현하기

CSS의 @keyframes와 animation 속성을 활용하면 자바스크립트 라이브러리 없이도 다양한 애니메이션 효과를 손쉽게 만들 수 있습니다. 이번 글에서는 요소가 화면 오른쪽으로 굴러가며 사라지는 롤아웃(Roll Out) 애니메이션을 구현하는 방법을 알아보겠습니다.

롤아웃 애니메이션이란?

롤아웃 애니메이션은 대상 요소가 회전하면서 오른쪽으로 이동하고, 동시에 투명해지면서 화면에서 사라지는 효과입니다. 주로 이미지나 로고가 화면을 벗어나는 연출에 사용되며, transform의 translateX()와 rotate(), 그리고 opacity 값을 조합하여 구현합니다.

예제 코드

아래 코드를 실행하면 로고 이미지가 10초에 걸쳐 오른쪽으로 굴러가며 사라지는 것을 확인할 수 있습니다.

<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 rollOut {
   0% {
      opacity: 1;
      -webkit-transform: translateX(0px) rotate(0deg);
   }
   100% {
      opacity: 0;
      -webkit-transform: translateX(100%) rotate(120deg);
   }
}

@keyframes rollOut {
   0% {
      opacity: 1;
      transform: translateX(0px) rotate(0deg);
   }
   100% {
      opacity: 0;
      transform: translateX(100%) rotate(120deg);
   }
}

.rollOut {
   -webkit-animation-name: rollOut;
   animation-name: rollOut;
}
</style>
</head>
<body>

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

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

코드 설명

1. 기본 스타일 (.animated)

.animated 클래스는 배경 이미지를 설정하고, 애니메이션 지속 시간(animation-duration: 10s)과 채우기 모드(animation-fill-mode: both)를 지정합니다. both 값은 애니메이션이 시작 전과 종료 후에도 해당 프레임의 스타일을 유지하도록 합니다.

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

@keyframes rollOut은 애니메이션의 시작(0%)과 끝(100%) 상태를 정의합니다.

0%: 불투명도 1, 이동 없음, 회전 각도 0도 — 초기 상태
100%: 불투명도 0, X축으로 100% 이동, 120도 회전 — 완전히 사라진 상태

구형 웹킷(Webkit) 기반 브라우저와의 호환성을 위해 -webkit- 접두사 버전도 함께 작성했습니다.

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

.rollOut 클래스는 animation-name 속성으로 위에서 정의한 rollOut 키프레임을 요소에 연결합니다.

4. 새로고침 버튼

애니메이션은 페이지 로드 시 한 번만 실행되므로, 버튼 클릭 시 location.reload()를 호출해 페이지를 다시 불러오면 효과를 반복해서 확인할 수 있습니다.

마무리

이처럼 CSS 애니메이션은 몇 줄의 코드만으로 역동적인 시각 효과를 만들 수 있습니다. 지속 시간, 회전 각도, 이동 거리 등의 값을 조절하면 원하는 분위기의 롤아웃 효과를 자유롭게 응용해 보세요.