[애니메이션] 007

커서가 닿았을 때만 움직이는 애니메이션

html

<div class="container">
  <div class="animation">
    <div class="transparent"></div>
  </div>
</div>

css

.animation {
  width: 640px; height: 480px;
  margin: auto;
  background-image: url(test.jpg);
  background-size: 100% 100%;
  overflow: hidden;
}
.transparent {
  width: 300px; height: 300px;
  background-color: transparent;
  border-radius: 50%;
  box-shadow: 0 0 0 1000px gray;
  position: relative;
  top: 0; left: 0; /* 시작 위치 */
  animation: circle 3s ease-in-out infinite;
  animation-play-state: paused;
}
.animation:hover .transparent {
  animation-play-state: running;
}
@keyframes circle {
  25% {
    left: 340px;
    top: 0;
  }
  50% {
    left: 340px;
    top: 180px;
  }
  75% {
    left: 0;
    top: 180px;
  }
  100% {
    left: 0;
    top: 0;
  }
}

아이디어
1. 원을 제외한 부분은 box-shadow를 크게 만들어 가리고 넘치는 영역은 hidden처리한다
2. keyframes을 이용해 애니메이션을 적용시킨다.
3. animation-play-state속성으로 애니메이션의 running, paused상태를 조절한다.

유노코딩