CSS - transition

transition

'transition'은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다.

transition은 자연적으로 발동되는 것이 아니다. 예를 들어 ':hover'와 같은 가상 클래스 선택자(Pseudo-Classes) 또는 JavaScript의 부수적인 액션에 의해 실행된다.

Q. transition이 자동 실행되도록 하고 싶다면?
-> CSS 애니메이션 속성을 쓰면 됨.

transition-property

• transition-property : 트랜지션의 대상이 되는 CSS 프로퍼티를 지정. 기본값은 all.
  
  
• transition-duration : 트랜지션이 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정.
  
  
• transition-timing-function : 트랜지션 효과를 위한 수치 함수를 지정. 기본값은 'ease'
  
  
• transition-delay : 프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정. 기본값은 0s.
  
  
• transition : 단축속성. 네 가지를 한 번에 지정.

PoiemaWeb 참고.