CSS의 @keyframes와 animation 속성을 활용하면 요소가 화면에서 사라질 때 다양한 퇴장(exit) 효과를 연출할 수 있습니다. 그중 rotateOutUpLeft는 요소의 왼쪽 아래 모서리를 회전 기준점으로 삼아 반시계 방향으로 -90도 회전하면서 서서히 투명해지며 화면 밖으로 사라지는 애니메이션입니다.
rotateOutUpLeft 애니메이션 예제
아래 전체 코드를 실행하면 로고 이미지가 왼쪽 위 방향으로 회전하며 사라지는 효과를 확인할 수 있습니다. 애니메이션을 처음부터 다시 보고 싶다면 하단의 버튼을 클릭해 페이지를 새로고침하세요.
<!DOCTYPE html>
<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 rotateOutUpLeft {
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 rotateOutUpLeft {
0% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
}
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft;
}
</style>
</head>
<body>
<div id="animated-example" class="animated rotateOutUpLeft"></div>
<button onclick="myFunction()">페이지 새로고침</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
코드 핵심 포인트
- transform-origin: left bottom; — 회전의 기준점(축)을 요소의 왼쪽 아래로 지정합니다. 요소는 이 지점을 중심으로 회전합니다.
- transform: rotate(-90deg); — 음수 각도는 반시계 방향 회전을 의미하며, 요소가 왼쪽 위로 넘어지듯 움직입니다.
- opacity: 1 → 0; — 애니메이션이 진행되는 동안 요소가 점차 투명해져 자연스럽게 사라집니다.
- animation-duration: 10s; — 애니메이션이 시작부터 끝까지 진행되는 총 시간을 설정합니다.
- animation-fill-mode: both; — 애니메이션이 끝난 뒤에도 최종 상태(opacity: 0)를 그대로 유지해 요소가 화면에 남지 않도록 합니다.
- -webkit- 접두사 — 구버전 Safari 등 WebKit 기반 브라우저와의 호환성을 위해 표준 속성과 함께 작성하는 것이 좋습니다.
버튼을 클릭하면 location.reload() 함수가 실행되어 페이지가 새로고침되고, 애니메이션을 다시 재생할 수 있습니다. 이 예제를 응용하면 회전 각도, 기준점 위치, 지속 시간을 조절해 다양한 퇴장 효과를 손쉽게 만들 수 있습니다.