CSS만으로 요소가 좌우로 흔들리는 워블(wobble) 애니메이션 효과를 손쉽게 만들 수 있습니다. 핵심은 @keyframes 규칙으로 흔들림의 각 단계를 정의하고, 이를 애니메이션으로 요소에 적용하는 것입니다. 아래 예제 코드를 실행하면 로고 이미지가 좌우로 기울며 흔들리는 모습을 확인할 수 있습니다.
워블 애니메이션의 원리
워블 효과는 translateX()(수평 이동)와 rotate()(회전)를 교차적으로 적용해 마치 물체가 중심을 잃고 흔들리는 듯한 느낌을 줍니다. 진폭이 점점 작아지도록(25% → 20% → 15% → 10% → 5%) 키프레임을 설정하면 더욱 자연스러운 감쇠 운동이 표현됩니다.
주요 CSS 속성
- animation-duration: 애니메이션이 한 번 완료되는 데 걸리는 시간 (예: 10s)
- animation-fill-mode: both; 애니메이션 시작 전과 종료 후에도 해당 키프레임의 상태를 유지
- animation-name: 요소에 적용할 @keyframes 이름 지정
- -webkit- 접두사: 사파리 등 구형 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 wobble {
0% { -webkit-transform: translateX(0%); }
15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
30% { -webkit-transform: translateX(20%) rotate(3deg); }
45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
60% { -webkit-transform: translateX(10%) rotate(2deg); }
75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
100% { -webkit-transform: translateX(0%); }
}
@keyframes wobble {
0% { transform: translateX(0%); }
15% { transform: translateX(-25%) rotate(-5deg); }
30% { transform: translateX(20%) rotate(3deg); }
45% { transform: translateX(-15%) rotate(-3deg); }
60% { transform: translateX(10%) rotate(2deg); }
75% { transform: translateX(-5%) rotate(-1deg); }
100% { transform: translateX(0%); }
}
.wobble {
-webkit-animation-name: wobble;
animation-name: wobble;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated wobble"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
코드 동작 방식
- .animated 클래스: 배경 이미지를 설정하고 애니메이션 지속 시간(10초)과 fill-mode를 지정합니다.
- @keyframes wobble: 0%부터 100%까지 이동량과 회전 각도를 단계별로 정의합니다. 15% 지점에서 -25% 이동과 -5도 회전으로 최대 진폭을 만든 뒤, 이후 점진적으로 진폭을 줄여 자연스럽게 멈추도록 합니다.
- .wobble 클래스:
animation-name속성으로 wobble 키프레임을 요소에 연결합니다. - 버튼 클릭:
location.reload()로 페이지를 새로고침하여 애니메이션을 반복해서 확인할 수 있습니다.
이처럼 @keyframes의 백분율 지점마다 transform 값을 조절하면 다양한 흔들림 패턴을 자유롭게 응용할 수 있습니다. 이동 거리나 회전 각도를 변경하면서 자신만의 워블 효과를 만들어 보세요.