• 회원가입
  • 로그인
  • 구글아이디로 로그인

[transition] CSS - transition-property 속성 - 트랜지션 효과 적용할 속성명 지정 (= transition-property속성 = 트랜지션프라퍼티속성) (IE10+)

목차
  1. transition-property 예제 - 트랜지션 적용할 단일 속성명 지정
  2. transition-property 정의
  3. transition-property 구문
  4. transition-property 예제 - 트랜지션 적용할 여러 속성명 지정

 

transition-property 예제 - 트랜지션 적용할 단일 속성명 지정

 

<style> 

div {

  width: 200px;

  height: 100px;

  line-height:100px;

  text-align:center;

  background: yellow;

  transition-property: width;

  transition-duration: 2s;

}


div:hover {

  width: 300px;

}

</style>


<div>홈짱닷컴 Homzzang.com</div>

 

결과보기

 

transition-property 정의

 

트랜지션 효과 (= 전환효과: 요소의 CSS 속성 변경 시 적용되는 효과) 적용할 속성명 지정.

 


 

1.

  • 트랜지션 효과는 보통 요소에 hover 시 적용함.
  • transition-duration 속성 (= 트랜지션 효과 완료에 걸리는 시간)은 필수임. (※ 만약, 지정 안 하면, 기본값이 0이라서 트랜지션 효과 발생 X)

 

2.

  • 기본값: all
  • 상속여부: X
  • 애니가능: X
  • CSS버전: CSS3
  • JS구문: object.style.transitionProperty="width,height"

 

3.

IE10 이상 주요 최신 브라우저 모두 지원. 일부 구형 브라우저 경우, 브라우저 접두어 필요. -webkit- (크롬/사파리), -moz- (파이어폭스), -o- (오페라) 접두어 필요.

 

 

transition-property 구문

 

selector {transition-property: none|all|property|initial|inherit;}

 


[속성값]

 

none

모든 속성에 트랜지션 효과 적용 X.

 

all

모든 속성에 트랜지션 효과 적용 O. (※ 기본값)

 

property

트랜지션 효과 적용할 속성을 콤마(,) 이용해 나열.

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.

 

 

transition-property 예제 - 트랜지션 적용할 여러 속성명 지정

 

<style> 

div {

  width: 200px;

  height: 100px;

  line-height:100px;

  text-align:center;

  background: yellow;

  transition-property: width, height, line-height;

  transition-duration: 2s;

}


div:hover {

  width: 300px;

  height:200px;

  line-height:200px;

}

</style>


<div>홈짱닷컴 Homzzang.com</div>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
게시물이 없습니다.
목록
찾아주셔서 감사합니다. Since 2012