CSS의 Shake(흔들기) 애니메이션 효과는 웹 페이지의 특정 요소를 좌우 또는 위아래로 빠르게 움직여 마치 흔들리는 듯한 시각적 효과를 주는 기법입니다. 주로 사용자의 주의를 끌거나, 잘못된 입력을 알릴 때, 혹은 로고나 버튼에 생동감을 더할 때 활용됩니다.
Shake 애니메이션의 동작 원리
Shake 효과는 CSS의 @keyframes 규칙과 translateX() 변환 함수를 조합하여 구현합니다. 요소를 왼쪽(-10px)과 오른쪽(+10px)으로 번갈아 이동시키면서 시작 위치(0px)로 되돌리는 방식으로, 짧은 간격의 반복 이동이 흔들림처럼 보이도록 만듭니다.
예제 코드
<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 shake {
0%, 100% {-webkit-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@keyframes shake {
0%, 100% {transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
20%, 40%, 60%, 80% {transform: translateX(10px);}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated shake"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>코드 상세 설명
1. 공통 스타일 (.animated 클래스)
.animated 클래스는 배경 이미지를 설정하고, animation-duration으로 애니메이션 전체 지속 시간을 10초로 지정합니다. animation-fill-mode: both 속성은 애니메이션이 시작 전과 종료 후에도 해당 프레임의 스타일을 유지하도록 합니다.
2. 핵심 프레임 정의 (@keyframes shake)
@keyframes shake에서는 진행률(%)에 따라 요소의 위치를 정의합니다.
- 0%, 100%: 원래 위치(
translateX(0))에서 시작하고 끝납니다. - 10%, 30%, 50%, 70%, 90%: 홀수 구간마다 왼쪽으로 10px 이동합니다.
- 20%, 40%, 60%, 80%: 짝수 구간마다 오른쪽으로 10px 이동합니다.
이렇게 좌우를 번갈아 이동하는 패턴이 반복되면서 자연스러운 흔들림 효과가 완성됩니다.
3. 웹킷 접두사 (-webkit-)
-webkit- 접두사가 붙은 코드는 Safari 등 구형 WebKit 기반 브라우저와의 호환성을 위한 것입니다. 최신 브라우저에서는 표준 @keyframes와 transform만으로도 대부분 동작하지만, 다양한 브라우저 환경을 고려한다면 함께 작성해 두는 것이 안전합니다.
4. 실행 및 재생 버튼
버튼 클릭 시 JavaScript의 location.reload() 함수가 호출되어 페이지를 새로고침하며, 애니메이션을 처음부터 다시 재생할 수 있습니다.
활용 팁
흔들림의 강도는 translateX()의 이동 거리 값으로, 속도는 animation-duration 값으로 조절할 수 있습니다. 예를 들어 이동 거리를 5px로 줄이면 미세한 떨림 효과가 되고, 지속 시간을 0.5s로 짧게 하면 빠르고 강렬한 경고 애니메이션을 만들 수 있습니다. 로그인 폼에서 비밀번호가 틀렸을 때 입력창을 흔들어 알려주는 UI 패턴에도 널리 사용되니 참고해 보세요.