[해피CGI][cgimall] 마우스 오버시 좌우로 움직이는 css 에니메이션 효과

 

 

위 영역에 마우스를 오버할 경우 부드럽게 좌우로 움직이는 animation 효과입니다.


소스상에서

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 30px;
  top: 0px;
 }
 100% {
  left: 0;
  top: 0;
 }

위 keyframes 영역은 위 녹색 구영역의 움직임을 주기 위한 영역입니다.
0% 는 첫번째 위치, 50% 는 두번째 위치할 부분, 100% 는 되돌아올 위치를 말합니다.
(되돌아올 위치를 100px 로 적용하면 한번더 좌측으로 이동되므로 되돌아올 위치가 아닌 다음번 이동될 위치입니다.)
slide 라는 부분은 animation-name 으로 적용할 네이밍으로 아래 추가 설명으로 안내드리겠습니다.

본 소스에서는

<div class="stage">
  <figure class="ball"></figure>
</div>

라는 형태의 구조이며, stage 영역에 마우스 hover 시 ball 영역이 움직이는 조건의 소스입니다.
css 상에선 아래처럼 hover 영역에 대한 animation 영역을 만들어 두었습니다.

 .stage:hover .ball {
  animation-name: slide; <-- keyframes 이름
  animation-duration: 2s; <-- 애니메이션 한 사이클이 걸리는 시간입니다.
  animation-timing-function: ease-in-out; <- 애니메이션 속도를 조절합니다.
  animation-delay: .2s; <- 애니메이션 시작전 지연시간입니다. (즉시 적용되면 부드러운 효과가 표현되지 않습니다.)
  animation-iteration-count: infinite; <- 반복횟수를 설정합니다. (infinite 는 무한으로 반복합니다.)
 }


위 구조로 적용하였으며, index.html 파일을 다운받아 해당 소스를 확인해보시기 바랍니다.

​

​

​