CSS의 @keyframes와 animation 속성을 활용하면 요소가 오른쪽 아래를 기준으로 회전하면서 나타나는 rotateInDownRight 애니메이션 효과를 쉽게 구현할 수 있습니다.
이 효과는 요소가 화면에 등장할 때 오른쪽 하단 모서리를 축으로 삼아 시계 방향으로 살짝 기울어진 상태(90도)에서 시작해, 원래 위치로 부드럽게 돌아오면서 서서히 나타나는 연출입니다. 로고나 배너 이미지에 적용하면 페이지에 역동적인 인상을 줄 수 있습니다.
애니메이션 동작 원리
- transform-origin: right bottom — 회전의 기준점을 요소의 오른쪽 아래 모서리로 지정합니다.
- transform: rotate(90deg) — 애니메이션 시작 시점(0%)에는 요소가 90도 회전된 상태이며, 불투명도(opacity)는 0입니다.
- transform: rotate(0) — 애니메이션이 끝나는 시점(100%)에는 요소가 제자리로 돌아오고, 불투명도는 1이 되어 완전히 보이게 됩니다.
예제 코드
아래 코드를 실행하면 이미지가 오른쪽 아래를 축으로 회전하면서 나타나는 것을 확인할 수 있습니다.
<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 rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInDownRight {
0% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated rotateInDownRight"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>코드 설명
1. 공통 스타일 (.animated 클래스)
.animated 클래스는 애니메이션이 적용될 대상 요소의 기본 스타일을 정의합니다. animation-duration: 10s;로 애니메이션 전체 재생 시간을 10초로 설정하고, animation-fill-mode: both;를 지정해 애니메이션이 시작 전과 종료 후에도 해당 프레임의 스타일 상태를 유지하도록 합니다.
2. 키프레임 정의 (@keyframes)
@keyframes rotateInDownRight에서 애니메이션의 시작(0%)과 끝(100%) 상태를 정의합니다. 시작 시점에는 요소가 오른쪽 아래를 기준으로 90도 회전되어 있고 투명한 상태이며, 끝나는 시점에는 회전이 풀리고 완전히 나타납니다. 구형 WebKit 브라우저(Safari 등)와의 호환성을 위해 -webkit- 접두사 버전도 함께 작성했습니다.
3. 애니메이션 적용 (.rotateInDownRight 클래스)
.rotateInDownRight 클래스는 위에서 정의한 키프레임을 실제 요소에 연결하는 역할을 합니다. HTML에서 이 클래스를 지정한 요소에 애니메이션이 자동으로 적용됩니다.
참고 사항
페이지를 새로고침하면 애니메이션을 다시 확인할 수 있으며, 예제의 'Reload page' 버튼이 그 역할을 합니다. 최신 브라우저에서는 -webkit- 접두사 없이 표준 @keyframes만 사용해도 대부분 정상적으로 동작하지만, 구형 브라우저 호환성이 필요하다면 접두사 버전을 함께 유지하는 것이 좋습니다.