CSS의 rotateOutDownRight 애니메이션은 요소가 오른쪽 아래 모서리를 회전 축으로 삼아 반시계 방향으로 돌면서 화면에서 사라지는 퇴장(exit) 효과입니다. 주로 이미지, 카드, 배너 등이 자연스럽게 빠져나가는 연출에 활용됩니다.
핵심 원리는 간단합니다. transform-origin을 right bottom으로 지정해 회전 기준점을 오른쪽 아래로 잡고, @keyframes 안에서 요소를 -90deg까지 회전시키는 동시에 opacity를 1에서 0으로 줄여 서서히 투명하게 만드는 방식입니다.
예제 코드
아래 전체 코드를 실행하면 로고 이미지가 오른쪽 아래를 축으로 회전하며 사라지는 것을 확인할 수 있습니다.
<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 rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
0% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
}
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated rotateOutDownRight"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>코드 핵심 포인트
- transform-origin: right bottom — 회전의 기준점을 요소의 오른쪽 아래 모서리로 설정합니다. 이 값이 없으면 요소 중심을 축으로 회전하게 됩니다.
- rotate(-90deg) — 음수 값이므로 반시계 방향으로 90도 회전합니다. 양수로 바꾸면 시계 방향으로 움직입니다.
- opacity: 1 → 0 — 회전과 동시에 요소가 점점 투명해지며 자연스럽게 사라집니다.
- animation-fill-mode: both — 애니메이션이 끝난 뒤에도 최종 상태(투명)를 그대로 유지해 요소가 다시 나타나지 않습니다.
- -webkit- 접두사 — Safari 등 구형 WebKit 기반 브라우저와의 호환성을 위해 함께 작성했습니다.
애니메이션 속도를 조절하고 싶다면 animation-duration 값을 변경하면 됩니다. 예를 들어 3s로 줄이면 3초 만에 회전 퇴장이 완료됩니다. 페이지를 새로고침해야 애니메이션을 다시 볼 수 있으므로, 예제에는 재실행용 버튼이 함께 포함되어 있습니다.