흔들기(Wiggle) 효과는 요소를 위아래 또는 좌우로 작고 빠른 움직임을 반복시켜 마치 흔들리는 듯한 느낌을 주는 애니메이션 기법입니다. 버튼에 마우스를 올렸을 때나 특정 요소에 주목하고 싶을 때 시선을 끄는 효과로 자주 활용됩니다.
흔들기 애니메이션의 동작 원리
CSS에서는 @keyframes 규칙과 transform: skewX() 속성을 조합하여 흔들기 효과를 쉽게 만들 수 있습니다. skewX()는 요소를 X축 방향으로 기울이는 변형 함수로, 기울기 각도를 9도 → -8도 → 7도 → -6도처럼 점차 줄여가며 번갈아 적용하면 진동이 서서히 가라앉는 자연스러운 흔들림이 완성됩니다.
또한 -webkit- 접두사를 함께 작성하면 Safari 등 구형 WebKit 기반 브라우저에서도 동일하게 동작합니다.
예제
아래 전체 코드를 복사해 HTML 파일로 저장한 뒤 브라우저에서 실행하면, 로고 이미지가 좌우로 흔들리는 애니메이션을 직접 확인할 수 있습니다. 페이지 하단의 [Reload page] 버튼을 누르면 애니메이션이 다시 재생됩니다.
<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 wiggle {
0% { -webkit-transform: skewX(9deg); }
10% { -webkit-transform: skewX(-8deg); }
20% { -webkit-transform: skewX(7deg); }
30% { -webkit-transform: skewX(-6deg); }
40% { -webkit-transform: skewX(5deg); }
50% { -webkit-transform: skewX(-4deg); }
60% { -webkit-transform: skewX(3deg); }
70% { -webkit-transform: skewX(-2deg); }
80% { -webkit-transform: skewX(1deg); }
90% { -webkit-transform: skewX(0deg); }
100% { -webkit-transform: skewX(0deg); }
}
@keyframes wiggle {
0% { transform: skewX(9deg); }
10% { transform: skewX(-8deg); }
20% { transform: skewX(7deg); }
30% { transform: skewX(-6deg); }
40% { transform: skewX(5deg); }
50% { transform: skewX(-4deg); }
60% { transform: skewX(3deg); }
70% { transform: skewX(-2deg); }
80% { transform: skewX(1deg); }
90% { transform: skewX(0deg); }
100% { transform: skewX(0deg); }
}
.wiggle {
-webkit-animation-name: wiggle;
animation-name: wiggle;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
.animated.wiggle {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
}
</style>
</head>
<body>
<div id="animated-example" class="animated wiggle"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
코드 핵심 포인트
- @keyframes wiggle : 애니메이션의 각 구간(0%~100%)별로
skewX()기울기를 정의합니다. 각도가 점점 작아지면서 흔들림이 자연스럽게 멈춥니다. - .wiggle 클래스 :
animation-name으로 키프레임을 연결하고,animation-timing-function: ease-in으로 시작은 느리게 끝은 빠르게 이어지도록 설정합니다. - .animated.wiggle : 두 클래스가 함께 적용될 때 지속 시간을
0.75s로 짧게 지정해 빠르고 경쾌한 흔들림을 연출합니다. - animation-fill-mode: both : 애니메이션 시작 전과 종료 후에도 스타일 상태가 유지되도록 합니다.
각도 값이나 지속 시간을 조절하면 흔들림의 강도와 속도를 자유롭게 변경할 수 있으니, 다양한 값을 실험해 보며 원하는 느낌을 찾아보세요.