[CSS] Transition으로 부드럽게 움직이는 방법

[CSS] Transition

CSS 요소를 변경할 때, 부드럽게 변경이 되도록 하는 CSS 속성.

 

Property/Description

transition	4가지 속성을 한줄에 단축해서 사용할 수 있다.
transition-delay	딜레이 할 만큼의 시간을 정한다.
transition-duration	얼마나 transition을 지속할지 정한다.
transition-property	특정 css 요소를 정한다. (width, height.... )
transition-timing-function	효과를 정한다. (ease, linear...)

 

Shorthand 단축문

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

div {
  transition: width 2s linear 1s;
}

해당 순서대로 축약해서 사용할 수 있다.