마우스 오버시 좌우로 움직이는 css 에니메이션 효과 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 기타효과 > 마우스 오버시 좌우로 움직이는 css 에니메이션 효과 상세정보

클라우드태그

Javascript

PHP

CSS

html

asp

API

jquery

mysql

image

Mobile

slide

게시판

메뉴

현재접속자 44명

마우스 오버시 좌우로 움직이는 css 에니메이션 효과

해피팀

네티즌

소스분류

기타효과

다운로드 횟수

126 회

간단설명

css 의 animation 효과중 keyframes 을 이용한 마우스 hover 효과로 간단하게 구현이 가능한 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 파일을 다운받아 해당 소스를 확인해보시기 바랍니다.