트랜지션

트랜지션이란 css 의 프로퍼티 값이 변화할 때 한번에 빡 변하는것이 아니라 일정 시간에 맞춰서 부드럽게 또는 보기 좋게 변하도록 하는 것을 말한다.

트랜지션은 언제 실행되는가?

트랜지션이 아무때나 실행되는것은 아니다. 가상 클래스 선택자 또는 자바스크립트에 의해서 실행한다.

트랜지션의 프로퍼티에 대해서 알아보자.

트랜지션을 효과적으로 사용하기 위해서 트랜지션 프로퍼티를 알아보자.

• transition-property : 트랜지션의 대상이 되는 css 프로퍼티를 지정한다. 만약 지정하지 않은 경우 모든 프로퍼티가 대상이 되며 복수로 지정할때는 쉼표로 구분지어 준다.
• transition-duration : 트랜지션이 실행되는 소요 시간을 지정한다. 값은 초(s), 밀리 초(ms) 로 지정 합니다.값을 지정해주지 않으면 기본 값 0s 로 트랜지션이 실행되지 않는다.
  transiotion-duration 값과 transition-property 의 값은 1대1 대응하게 됩니다.

div {
transition-property : width, height;
transition-duration : 2s, 6s;
}

위와 같이 지정할 수 있고

div {
transition : width 2s, height 6s;

이렇게 transition 으로 축약 표현을 사용할 수 있다.

• traisition-timing-function :
  변화 흐름을 지정하는 프로퍼티 입니다.

  • ease : 기본값 입니다. 느리게 트렌지션 하다가 점점 빨라지고 느리게 트렌지션 하면서 종료 합니다.
  • linear : 일정한 속도로 트렌지션 합니다.
  • ease-in : 느리게 트렌지션하며 시작하다가 어느정도 순간부터 일정한 속도로 트렌지션하며 종료 됩니다.
  • ease-out : 일정한 속도로 트렌지션하며 시작하다가 점점 느려지면서 트렌지션을 종료 합니다.
  • ease-in-out : ease 와 유사 합니다. 느리게 트렌지션하며 시작하고 점점 느려지면서 트렌지션을 종료 합니다.

• transition-delay : 프로퍼티가 변화하는 순간부터 트랜지션이 실행되는 사이에 대기시간을 지정 합니다. 값은 초(s), 밀리 초(ms) 로 지정 합니다.
  쉽게 말해서 대기시간을 지정하면 그 시간 후에 트렌지션이 실행 됩니다.

• transition : 모든 트랜지션 프로퍼티를 한번에 지정할 수 있습니다.
  property duration function delay 순서로 지정 합니다.

layout 에 영향을 주는 프로퍼티의 트렌지션은 하지 않는것이 좋습니다. 그 이유는 layout 에 영향을 주는 프로퍼티의 값이 변경되어 트렌지션이 진행 된다면 브라우저는 프로퍼티 값의 변화에 영향을 받는 모든 요소의 값을 다시 계산하여 layout 을 그립니다. 이렇게되면 브라우저의 성능을 저하시키게 됩니다.

layout 에 영향을 주는 대표적인 프로퍼티는
width, height, position, padding, margin, border, top,
left, right, bottom, float, display, font-size, font-weight, text-align 등이 있습니다.