CSS / 애니메이션 / transition / transition-delay - transition 시작을 연기하는 속성

transition-delay

  • transition-delay로 transition이 시작하는 시간을 연기할 수 있습니다.
  • IE는 버전 10부터 지원합니다.

문법

  • 기본값은 0s입니다.
  • 시간 단위는 초(s) 또는 1/1000초(ms)를 사용합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제

  • 체크박스에 체크하면 1초에 걸쳐 박스가 커집니다.
  • 첫 번째 박스는 0.5초 대기 후 커집니다. 즉, 박스가 커지는데 1.5초가 걸립니다.
  • 두 번째 박스는 1초 대기 후 커집니다. 즉, 박스가 커지는데 2초가 걸립니다.