스윙(Swing) 애니메이션은 요소가 마치 줄이나 축에 매달려 있는 것처럼 좌우로 흔들리는 듯한 움직임을 만들어 주는 CSS 애니메이션 효과입니다. 로고나 아이콘, 배너 등 사용자의 시선을 끌고 싶은 요소에 자연스러운 생동감을 부여할 때 유용하게 활용됩니다.
스윙 애니메이션의 동작 원리
스윙 효과는 크게 두 가지 CSS 속성의 조합으로 구현됩니다.
1. transform-origin: 회전의 기준점을 지정하는 속성입니다. top center로 설정하면 요소의 상단 중앙을 축으로 삼아 마치 못에 걸어놓은 그림처럼 흔들리는 느낌을 연출할 수 있습니다.
2. @keyframes: 애니메이션의 각 단계별 회전 각도를 정의합니다. 진폭이 점점 작아지도록 15도 → -10도 → 5도 → -5도 → 0도 순서로 각도를 조절하면, 실제 추처럼 서서히 멈추는 자연스러운 감쇠 운동 효과를 얻을 수 있습니다.
예제 코드
아래는 이미지 요소에 스윙 애니메이션을 적용하는 전체 HTML 예제입니다.
<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 swing {
20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
20% { -webkit-transform: rotate(15deg); }
40% { -webkit-transform: rotate(-10deg); }
60% { -webkit-transform: rotate(5deg); }
80% { -webkit-transform: rotate(-5deg); }
100% { -webkit-transform: rotate(0deg); }
}
@keyframes swing {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
.swing {
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated swing"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>코드 핵심 포인트 정리
애니메이션 지속 시간 설정
animation-duration: 10s로 설정하여 한 번의 스윙 사이클이 10초에 걸쳐 천천히 진행되도록 했습니다. 더 빠르거나 느린 효과를 원하면 이 값을 조절하면 됩니다.
벤더 프리픽스(-webkit-)의 의미
예제에는 -webkit- 접두사가 붙은 속성들이 함께 작성되어 있습니다. 이는 Safari 등 WebKit 기반 구형 브라우저와의 호환성을 위한 것으로, 최신 브라우저에서는 표준 속성(@keyframes, transform)만으로도 대부분 정상 동작합니다.
animation-fill-mode: both
animation-fill-mode: both를 지정하면 애니메이션이 시작 전과 종료 후에도 해당 스타일 상태가 유지되어, 화면 깜빡임 없이 일관된 결과를 보여줍니다.
페이지 새로고침 버튼
예제 하단의 버튼은 location.reload() 함수를 호출해 페이지를 다시 불러오므로, 애니메이션을 반복해서 확인할 수 있도록 돕는 역할을 합니다.
마무리
CSS만으로 자바스크립트 없이 흔들리는 스윙 효과를 손쉽게 구현할 수 있습니다. 진폭 조절, 지속 시간 변경, 여러 요소에 적용하는 방식으로 응용하면 페이지에 풍부한 인터랙션을 더할 수 있습니다.