CSS로 이미지 흔들림 효과 구현하기
웹 페이지에서 마우스를 올렸을 때(hover) 이미지가 좌우로 흔들리는 애니메이션 효과는 사용자의 시선을 사로잡기 좋은 방법입니다. CSS의 @keyframes 규칙과 :hover 선택자를 조합하면 JavaScript 없이도 간단하게 구현할 수 있습니다.
핵심 원리는 다음과 같습니다.
- @keyframes: 애니메이션 진행률(0%~100%)에 따라 이미지의 위치 이동(translate)과 회전(rotate) 값을 정의합니다.
- :hover: 마우스 커서가 이미지 위에 올라가는 순간 애니메이션이 시작되도록 합니다.
- animation-iteration-count: infinite: 애니메이션이 멈추지 않고 무한히 반복되도록 설정합니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img{
width: 400px;
height: 400px;
margin:50px;
}
img:hover {
animation: shakeImg 0.5s;
animation-iteration-count: infinite;
}
@keyframes shakeImg {
0% { transform: translate(1px, 1px) rotate(5deg); }
20% { transform: translate(-3px, 0px) rotate(10deg); }
30% { transform: translate(3px, 2px) rotate(-10deg); }
50% { transform: translate(-1px, 2px) rotate(-20deg); }
70% { transform: translate(3px, 1px) rotate(-25deg); }
90% { transform: translate(1px, 2px) rotate(10deg); }
100% { transform: translate(1px, -2px) rotate(-10deg); }
}
</style>
</head>
<body>
<h1>이미지에 마우스를 올려보세요</h1>
<img src="https://i.picsum.photos/id/551/400/400.jpg">
</body>
</html>코드 설명
shakeImg라는 이름의 키프레임은 0.5초 동안 실행되며, 각 단계마다 이미지를 몇 픽셀씩 상하좌우로 이동시키고 동시에 회전시킵니다. 위치와 각도 값이 매번 달라지기 때문에 자연스러운 '흔들림' 느낌이 연출됩니다. 애니메이션 지속 시간을 짧게(0.5s) 설정하고 반복 횟수를 무한대로 지정했기 때문에, 마우스를 올리는 동안 이미지가 계속 흔들리게 됩니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 화면이 나타납니다.
이미지 위에 마우스 커서를 올리면 아래 출력 화면처럼 이미지가 계속해서 흔들리는 것을 확인할 수 있습니다.
마무리
이처럼 @keyframes와 :hover만으로도 별도의 라이브러리나 스크립트 없이 역동적인 이미지 효과를 만들 수 있습니다. 이동 거리나 회전 각도 값을 조절하면 흔들림의 강도를 자유롭게 변경할 수 있으니, 버튼 강조나 알림 아이콘 등 다양한 UI 요소에 응용해 보세요.