떨리는
![[CSS] 떨리는 효과 구현하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FL9oLa%2FbtrGIwZkHUM%2FAAAAAAAAAAAAAAAAAAAAABXn6vN25YdFtoXiN50BXuFPxlAQNFEJ5qS9XhqqXFGZ%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3Dpfjh9fcz4tL26f7oWcmfIay1XB0%253D)
[CSS] 떨리는 효과 구현하기
별도의 라이브러리 없이 간단한 코드로 진동처럼 흔들리는 애니메이션을 구현할 수 있습니다. 코드 See the Pen Vibration Animation Box by hyukson (@hyukson) on CodePen. 코드 풀이 떨림 효과를 줄 박스 요소를 하나 만들어줍니다. .box { width: 150px; height: 150px; background: #febf00; } .box.vibration { animation: vibration 0.1s infinite; } 박스 크기와 색깔 속성을 통해 시각화시켜주고, vibration 클래스가 포함된 박스에는 흔들리는 효과를 가진 애니메이션이 작동되도록 구현해줍니다. @keyframes vibration { from { transform: rota..