CSS 애니메이션을 활용하면 요소가 화면에서 사라질 때 회전하면서 페이드아웃되는 rotateOut(회전 퇴장) 효과를 손쉽게 만들 수 있습니다. 이 효과는 @keyframes 규칙으로 애니메이션의 시작과 끝 상태를 정의하고, animation-name 속성으로 해당 애니메이션을 요소에 적용하는 방식으로 구현합니다.
핵심 개념 정리
- @keyframes: 애니메이션 진행 단계별(0% ~ 100%) 스타일 변화를 정의합니다.
- transform: rotate(): 요소를 지정한 각도만큼 회전시킵니다.
- opacity: 요소의 투명도를 조절하여 자연스러운 페이드아웃 효과를 줍니다.
- transform-origin: 회전의 기준점을 설정합니다. 여기서는 요소의 중앙(center center)을 기준으로 합니다.
아래 예제 코드를 실행하면 로고 이미지가 10초에 걸쳐 중앙을 축으로 200도 회전하면서 서서히 사라지는 것을 확인할 수 있습니다.
예제 코드
<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 rotateOut {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(200deg);
opacity: 0;
}
}
@keyframes rotateOut {
0% {
transform-origin: center center;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: center center;
transform: rotate(200deg);
opacity: 0;
}
}
.rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated rotateOut"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>코드 설명
1. 공통 애니메이션 설정 (.animated 클래스)
animation-duration: 10s;로 애니메이션이 10초 동안 진행되도록 설정했으며, animation-fill-mode: both;를 지정해 애니메이션이 끝난 후에도 최종 상태(투명해진 상태)가 유지되도록 했습니다.
2. @keyframes로 회전 퇴장 정의
시작 시점(0%)에는 rotate(0), 즉 회전하지 않은 상태에서 불투명도가 1이고, 종료 시점(100%)에는 rotate(200deg)로 200도 회전하면서 불투명도가 0이 되어 완전히 사라집니다.
3. 벤더 프리픽스(-webkit-)
Safari 등 구형 WebKit 기반 브라우저와의 호환성을 위해 -webkit- 접두사가 붙은 속성을 함께 작성했습니다. 최신 브라우저에서는 표준 속성만 사용해도 대부분 정상적으로 동작합니다.
4. 페이지 다시 보기 버튼
애니메이션은 페이지 로드 시 한 번 실행되므로, location.reload()를 호출하는 버튼을 두어 효과를 반복해서 확인할 수 있도록 구성했습니다.
마무리
이처럼 CSS만으로도 JavaScript 없이 부드러운 회전 퇴장 애니메이션을 구현할 수 있습니다. 회전 각도나 지속 시간, animation-timing-function(예: ease-in-out)을 조절하면 더욱 다양한 느낌의 효과를 연출할 수 있습니다.