transition-delay
- transition-delay로 transition이 시작하는 시간을 연기할 수 있습니다.
- IE는 버전 10부터 지원합니다.
문법
transition-duration: time| initial | inherit
- 기본값은 0s입니다.
- 시간 단위는 초(s) 또는 1/1000초(ms)를 사용합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
예제
- 체크박스에 체크하면 1초에 걸쳐 박스가 커집니다.
- 첫 번째 박스는 0.5초 대기 후 커집니다. 즉, 박스가 커지는데 1.5초가 걸립니다.
- 두 번째 박스는 1초 대기 후 커집니다. 즉, 박스가 커지는데 2초가 걸립니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body {
font-family: Consolas, monospace;
}
.jb {
box-sizing: border-box;
width: 64px;
height: 64px;
margin: 10px 0px;
background-color: orange;
transition-duration: 1s;
}
input:checked ~ .jb {
width: 100%;
}
.jb1 {
transition-delay: 0.5s;
}
.jb2 {
transition-delay: 1s;
}
</style>
</head>
<body>
<input type="checkbox">
<p>transition-delay: 0.5s;</p>
<div class="jb jb1"></div>
<p>transition-delay: 1s;</p>
<div class="jb jb2"></div>
</body>
</html>
