[transition] CSS - transition-delay 속성 - 트랜지션 시작 대기 시간 (= transition-delay속성 = 트랜지션딜레이속성) (IE10+)

1. transition-delay 예제 - 트랜지션 시작 대기 시간
2. transition-delay 정의
3. transition-delay 구문

transition-delay 예제 - 트랜지션 시작 대기 시간

 

<style> 

div {

  width: 200px;

  height: 100px; 

  line-height:100px;

  text-align:center;

  background: yellow;

  transition-property: width;

  transition-duration: 5s;

  transition-delay: 2s;

}

div:hover {

  width: 300px;

}

</style>

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

 

결과보기

transition-delay 정의

 

트랜지션(=전환효과) 시작 대기 시간 지정.

 

---

 

1.

• 기본값: 0s
• 상속여부: X
• 애니가능: X
• CSS버전: CSS3
• JS구문: object.style.transitionDelay="2s"

 

2.

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

 

3. MDN 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay 

 

transition-delay 구문

 

selector {transition-delay: time|initial|inherit;} 

 

---

[속성값]

 

time

트랜지션 시작 대기시간 (기본값: 0s)

• 초(s) 또는 밀리초(ms) 단위 사용.

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.