CSS3 Transition 효과내보기 happycgi

회원가입

출석체크

마이페이지

CGIMALL

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

홈 > CSS > 기타효과 > CSS3 Transition 효과내보기 상세정보

클라우드태그

javascript

php

html

asp

mysql

CSS

mobile

jquery

image

slide

占쌨댐옙

메뉴

占쏙옙占쏙옙占쏙옙트

현재접속자 명

CSS3 Transition 효과내보기

해피팀

네티즌

소스분류

기타효과

다운로드 횟수

0 회

간단설명

CSS3를 활용하여 Transition 애니메이션 효과를 내어보는 방법을 안내 해 드립니다. 자바스크립트 없이 자연스러운 애니메이션 효과를 만들때 유용한 기능입니다.

평가하기

자바스크립트 도움없이 애니메이션 효과를 만들 때 사용합니다.
즉 변화가 부드러운 애니메이션을 의미합니다.

delay, property, duration, timing-function 의 4가지 속성을 가지고 있으며
property에서 지정한 속성의 값이 변경 될 때 자연스럽게 표현됩니다.

transition속성

transition-property : 속성
transition-duration : 지속시간.
transitin-timing-function: 지정시간동안 트랜지션 속도

사용예)

<a href="#" class="footer">해피CGI</a>

a { text-decoration:none; }
a.footer { padding:10px 20px; background:#0c4da2; }
a.footer:hover{ background:#3baee7; }

트랜지션 적용하기 (크롬기준)

a.footer {
padding:10px 20px; background:#0c4da2;
-webkit-transition-property : background;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease;
}
a.footer:hover{ background:#3baee7; }

백그라운드 속성에 트랜지션을 줬는데,
마우스를 오버했을때만 배경색상이 #3baee7로 변하는 과정에서
애니메이션 효과가 일어나게 됩니다.

네티즌 의견 이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)

내용

아이디

의견남기기

등록된 의견이 없습니다.