[JavaScript] Transition 속성에 대해서

Transition 속성

• 속성을 서서히 변화시키는 속성
• 아래 네가지 속성을 한번에 적용하는 속성이다.
• Transition-property
  • transition 이 적용될 CSS를 지정한다
  • none: 적용안함
  • all: 모든 속성
  • CSS property: 해당 속성만 적용
• Transition-duration
  • 속성의 변화가 진행되는 시간을 지정한다
  • 시간 단위로 s또는 ms를 사용한다.
• Transition-delay
  • 속성의 변화가 시작되는 시점을 지연시키는 속성
  • 시간 단위로 s또는 ms를 사용한다.
• Transition-timing-function
  • 속성의 변화가 진행되는 속도를 조절하는 속성
  • 기본값: ease (천천히 시작해서 보통속도 진행 후 천천히 마무리)
  • linear: 항상 일정한 속도