목차
transition-duration 예제 - 트랜지션 완료에 걸리는 시간
transition-duration 정의
transition-duration 구문
transition-duration 예제 - 트랜지션 완료에 걸리는 시간
<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-duration 정의
트랜지션(= 전환효과) 완료에 걸리는 소요 시간 지정.
1.
트랜지션 효과는 보통 요소에 hover 시 작동함.
transition-duration 속성 (= 트랜지션 효과 완료에 걸리는 시간)은 필수임. (※ 만약, 지정 안 하면, 기본값이 0이라서 트랜지션 효과 발생 X)
2.
3.
IE10 이상 주요 최신 브라우저 모두 지원. 일부 구형 브라우저 경우, 브라우저 접두어 필요. -webkit- (크롬/사파리), -moz- (파이어폭스), -o- (오페라) 접두어 필요.
4. MDN 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration
transition-duration 구문
selector {transition-duration: time |initial|inherit;}
[속성값]
time
트랜지션(=전환효과) 완료에 걸리는 소요시간. (기본값: 0s)
초(s) 또는 밀리초(ms) 단위 사용.
여러 개 사용 경우, 콤마(,)로 구분 나열.
time 개수가 속성 개수보다 적으면, 반복해 속성들에 적용.
time 개수가 속성 개수보다 많으면, 속성 개수까지만 적용.
initial
이 속성의 기본값(= 0s = 트랜지션 적용 X) 사용.
inherit
부모요소의 속성값 상속.
주소 복사
랜덤 이동