CSS만으로 요소가 회전하면서 나타나는 Rotate In(회전 등장) 애니메이션을 만들 수 있습니다. 핵심은 @keyframes 규칙으로 애니메이션의 시작과 끝 상태를 정의하고, transform: rotate()로 회전 각도를 지정하며, opacity로 투명도를 조절하는 것입니다.
동작 원리
- transform-origin: center center — 요소의 중심을 기준으로 회전합니다.
- transform: rotate(-200deg) — 시작 시점에 -200도 기울어진 상태에서 출발합니다.
- opacity: 0 → 1 — 투명한 상태에서 점점 선명하게 나타납니다.
- animation-duration: 10s — 애니메이션이 10초에 걸쳐 진행됩니다.
- animation-fill-mode: both — 애니메이션 시작 전후에도 스타일 상태가 유지됩니다.
예제 코드
아래 코드를 실행하면 로고 이미지가 회전하면서 화면에 나타나는 효과를 확인할 수 있습니다.
<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 rotateIn {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(-200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateIn {
0% {
transform-origin: center center;
transform: rotate(-200deg);
opacity: 0;
}
100% {
transform-origin: center center;
transform: rotate(0);
opacity: 1;
}
}
.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated rotateIn"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>코드 설명
위 예제에서는 크게 세 부분으로 구성되어 있습니다. 먼저 .animated 클래스에는 배경 이미지와 함께 애니메이션의 지속 시간(animation-duration)과 채우기 모드(animation-fill-mode)를 설정했습니다. 다음으로 @keyframes rotateIn에서 0% 시점에는 요소가 -200도 회전하고 완전히 투명한 상태(opacity: 0)이며, 100% 시점에는 0도로 돌아오고 불투명한 상태(opacity: 1)가 됩니다. 마지막으로 .rotateIn 클래스가 이 키프레임을 실제 요소에 적용합니다.
참고로 -webkit- 접두사가 붙은 속성은 구버전 Safari, Chrome 등 WebKit 기반 브라우저와의 호환성을 위한 것입니다. 최신 브라우저에서는 표준 속성만 사용해도 대부분 정상적으로 동작하지만, 더 넓은 브라우저 지원이 필요하다면 두 가지를 함께 작성하는 것이 안전합니다.
버튼을 클릭하면 페이지가 새로고침되어 애니메이션을 다시 확인할 수 있습니다. 회전 각도나 지속 시간 값을 변경하면서 다양한 변형 효과를 실험해 보세요.