이미지를 진동시키는 방법

CSS를 사용하여 이미지를 진동시키는 방법을 배우세요.

마우스를 이미지 위에 가져가세요:

튜립

이미지를 진동시키는 방법

img:hover {
  /* 진동 애니메이션을 시작하고 이 애니메이션을 0.5초 동안 지속 */
  animation: shake 0.5s;
  /* 애니메이션이 끝나면 다시 시작 */
  animation-iteration-count: infinite;
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

직접 시도해 보세요

관련 페이지

강의:CSS 3D 변환