CSS 이용한 움직이는 이미지

# 움직이는 이미지 효과

## 결과물

See the Pen 움직이는 이미지 by dlagusgh1 (@dlagusgh1) on CodePen.

## html

<div class="logo">
  <img src="https://cdn.pixabay.com/photo/2018/07/28/00/15/horse-3567041_960_720.jpg" alt="logo" class="logo">
</div>

## CSS

.logo > img {
  width: 300px;
  height: 300px;
  animation: watch 1s linear infinite both;
}

/* 탑바 로고 움직임 */
@keyframes watch {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-5px, 5px);
  }
  40% {
    transform: translate(-5px, -5px);
  }
  60% {
    transform: translate(5px, 5px);
  }
  80% {
    transform: translate(5px, -5px);
  }
  100% {
    transform: translate(0);
  }
}
.logo > img:hover {
  animation-play-state: paused;
}

## 출처

https://www.youtube.com/watch?v=AKgkKv0qKgw

https://pixabay.com/ko/