CSS의 @keyframes와 animation 속성을 활용하면 요소가 오른쪽 아래 모서리를 기준으로 시계 방향으로 90도 회전하면서 화면에서 사라지는 rotateOutUpRight 애니메이션 효과를 쉽게 구현할 수 있습니다.
이 효과는 transform-origin: right bottom;을 지정해 회전의 기준점을 요소의 오른쪽 하단에 두고, rotate(0)에서 rotate(90deg)까지 회전시키는 방식으로 동작합니다. 동시에 opacity 값을 1에서 0으로 줄여 요소가 자연스럽게 페이드아웃되도록 합니다.
주요 코드 설명
- animation-duration: 애니메이션이 완료되기까지 걸리는 시간을 설정합니다. (예제에서는 10초)
- animation-fill-mode: both; 애니메이션 시작 전과 종료 후에도 스타일 상태를 유지합니다.
- @keyframes rotateOutUpRight: 애니메이션의 시작(0%)과 끝(100%) 상태를 정의합니다.
- -webkit- 접두사: Safari 등 구형 WebKit 기반 브라우저와의 호환성을 위해 함께 작성합니다.
예제 코드
<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 rotateOutUpRight {
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 rotateOutUpRight {
0% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
}
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated rotateOutUpRight"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 로고 이미지가 오른쪽 아래 모서리를 축으로 시계 방향으로 회전하면서 서서히 사라지는 것을 확인할 수 있습니다. 페이지를 다시 불러오려면 [Reload page] 버튼을 클릭하세요.
활용 팁
animation-duration값을 조절하면 회전 속도를 원하는 대로 변경할 수 있습니다.transform-origin값을left bottom,center center등으로 바꾸면 다양한 방향의 회전 효과를 만들 수 있습니다.- 요소가 등장할 때 반대로 적용하고 싶다면
rotateInUpRight형태로 opacity 값을 반대로 설정하면 됩니다.