CSS의 rollIn 애니메이션은 요소가 화면 왼쪽 바깥에서 회전하면서 굴러 들어오듯 나타나는 시각적 효과입니다. 이 효과는 @keyframes 규칙과 transform, opacity 속성을 조합하여 손쉽게 구현할 수 있으며, 로고나 배너 등 특정 요소에 역동적인 등장 연출을 더하고 싶을 때 유용하게 활용됩니다.
rollIn 애니메이션의 동작 원리
rollIn 효과는 두 개의 핵심 상태(키프레임)로 정의됩니다.
- 시작 지점(0%): 요소가 X축 방향으로 -100%만큼 이동한 상태에서 -120도 회전하며, 투명도(opacity)는 0으로 보이지 않습니다.
- 종료 지점(100%): 요소가 원래 위치(translateX 0px)로 이동하고 회전각이 0도가 되며, 투명도는 1로 완전히 나타납니다.
이 두 상태 사이를 브라우저가 부드럽게 보간(interpolation)하기 때문에, 요소가 마치 굴러서 들어오는 것처럼 자연스럽게 화면에 등장합니다.
구현 예제 코드
아래 코드를 실행하면 이미지 요소가 왼쪽에서 회전하며 굴러 들어오는 rollIn 효과를 확인할 수 있습니다.
<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 rollIn {
0% {
opacity: 0;
-webkit-transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
}
}
@keyframes rollIn {
0% {
opacity: 0;
transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
}
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated rollIn"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>코드 주요 포인트 살펴보기
1. 애니메이션 기본 설정 (.animated)
animation-duration: 10s;는 애니메이션이 시작부터 끝까지 진행되는 총 시간을 의미합니다. 값을 줄이면(예: 2s) 더 빠르고 경쾌한 효과를 얻을 수 있습니다. 또한 animation-fill-mode: both;를 지정하면 애니메이션이 시작 전과 종료 후에도 해당 프레임의 스타일 상태가 유지되어 깜빡임 없이 자연스럽게 연출됩니다.
2. 벤더 접두사(-webkit-)의 필요성
예제에는 @-webkit-keyframes와 @keyframes가 함께 작성되어 있습니다. -webkit- 접두사는 구버전 Safari, Chrome 등 WebKit 기반 브라우저와의 호환성을 위한 것입니다. 최신 브라우저에서는 표준 문법인 @keyframes만으로도 대부분 동작하지만, 다양한 환경을 지원해야 한다면 접두사를 함께 사용하는 것이 안전합니다.
3. transform 속성 조합
translateX(-100%)는 요소를 자기 너비만큼 왼쪽으로 밀어내고, rotate(-120deg)는 반시계 방향으로 120도 회전시킵니다. 이 두 변형이 결합되면서 단순히 슬라이드하는 것이 아니라 '굴러 들어오는' 느낌을 만들어냅니다. 회전 각도나 이동 거리를 조절하면 다양한 변형 효과를 연출할 수 있습니다.
직접 테스트하는 방법
페이지를 새로고침해야 애니메이션이 처음부터 다시 재생됩니다. 예제에는 location.reload()를 호출하는 버튼이 포함되어 있어, 클릭 한 번으로 페이지를 다시 불러오고 rollIn 효과를 반복해서 확인할 수 있습니다.
마무리
rollIn은 CSS 애니메이션의 기본기를 익히기에 가장 좋은 예제 중 하나입니다. @keyframes로 시작과 끝 상태를 정의하고, animation-name, animation-duration, animation-fill-mode 같은 속성으로 동작을 제어하는 패턴은 bounceIn, fadeInUp 등 다른 애니메이션 효과에도 그대로 적용됩니다. 이 원리를 이해하면 웹사이트에 원하는 어떤 등장 효과든 자유롭게 만들 수 있습니다.