(CSS) transition 사용 방법 정리

 

css를 적용하다 보면 특정 요소가 변화하게 만들어야 할 때가 있다. 

 

근데 그냥 변화시키면 상당히 부자연스럽다. 

 

한 상태에서 다른 상태로 바로 한 번에 변화해 버리기 때문이다.

 

이때 변화를 자연스럽게 주고 싶다면 transition을 사용하면 된다. 

 

 

 

transition 사용 위치

transition은 변화 하기전 상태에 적용해야 한다. 

 

즉 변화 조건(state)가 없는 곳에 적용해야 한다는 뜻이다. 

 

예를 들어 div가 하나 있고, 마우스를 올렸을 때(div:hover) div를 변화시키고 싶다면,

 

div:hover가 아닌 div에 transition을 작성해야 한다는 뜻이다. 

 

 

transition 사용 방법

transition은 아래와 같이 사용한다.

 

속성 작성 순서는 큰 상관이 없지만 duration보다 늘 delay가 뒤에 와야 한다.

div {
  transition: <property> <duration> <timing-function> <delay>;
}

• property : transition 완료한 CSS 속성의 이름을 나타내는 문자열
  • ex) div의 배경색을 변화시키고 싶다면 property는 background-color를 작성하면 된다.
• duration : transition 애니메이션 지속 시간
• timing-function : 애니메이션의 가속 곡선 설정
  • linear : 직선 그래프
  • ease-in : 시작과 끝이 빠름
  • ease-out : 시작과 끝이 느림
  • ease-in-out : 시작이 빠르고 끝이 림

• delay : 애니메이션이 시작되기 전에 주는 딜레이 시간

 

 

 

transition 사용 예시

 

See the Pen transition by 김다영 (@xnpzlttb-the-solid) on CodePen.