CSS의 @keyframes와 animation 속성을 활용하면 요소가 화면에 나타날 때 오른쪽 위 방향으로 회전하며 등장하는 rotateInUpRight 애니메이션 효과를 쉽게 구현할 수 있습니다.
동작 원리
이 애니메이션은 크게 세 가지 핵심 속성으로 구성됩니다.
- transform-origin: right bottom; — 요소의 오른쪽 아래 모서리를 회전의 기준점으로 지정합니다.
- transform: rotate(-90deg) → rotate(0); — 처음에는 -90도 기울어진 상태에서 시작해 최종적으로 원래 위치까지 회전합니다.
- opacity: 0 → 1; — 투명한 상태에서 점진적으로 나타나며 자연스러운 등장 연출을 완성합니다.
또한 -webkit- 접두사를 함께 작성하여 Safari 등 구형 웹킷 기반 브라우저에서도 동일하게 동작하도록 호환성을 확보했습니다.
전체 예제 코드
아래 코드를 그대로 실행하면 로고 이미지가 오른쪽 위 방향으로 회전하면서 나타나는 것을 확인할 수 있습니다. 버튼을 클릭하면 페이지가 새로고침되어 애니메이션을 반복해서 볼 수 있습니다.
<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 rotateInUpRight {
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 rotateInUpRight {
0% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated rotateInUpRight"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>활용 팁
animation-duration 값을 조절하면 회전 속도를 변경할 수 있습니다. 예를 들어 10s를 2s로 줄이면 더 빠르고 역동적인 효과를 얻을 수 있습니다. 또한 이 클래스를 배너, 카드, 아이콘 등 다양한 요소에 적용하면 페이지 진입 시 시선을 끄는 인터랙션을 손쉽게 추가할 수 있습니다.