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

회원가입

출석체크

마이페이지

CGIMALL

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

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

클라우드태그

Javascript

PHP

ASP

CSS

html

mysql

jquery

image

API

Mobile

메뉴

slide

게시판

현재접속자 명

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

해피팀

네티즌

소스분류

기타효과

다운로드 횟수

124 회

간단설명

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 파일을 다운받아 해당 소스를 확인해보시기 바랍니다.