CSS: Transition

트랜지션은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것이다. 이벤트에 맞추어 즉시 일어나는 것이 아니라 서서히 변화가 일어나기 때문에 더욱 자연스러워 보이는 효과가 있다.

 

transition: all 2s;

위 코드에 대해서 설명을 해보자면 첫 번째 값을 transition을 적용할 이벤트의 범위를 의미한다. all은 모든 프로퍼티 변화에 트렌지션을 적용하겠다는 의미가 된다. 두 번째 값인 2s은 2초의 지연 시간을 준다는 의미를 지니고 있다.

 

transition이 지정된 범위 역시 중요하다. div:hover와 같이 특정 이벤트 안에 지정한 경우에는 해당 이벤트가 발생할 때에만 트렌지션이 적용되고 hover-off가 되는 경우에는 트렌지션이 적용되지 않는다.

 

Property	Explanation	Default Value
transition-property	트랜지션의 대상이 되는 CSS 프로퍼티를 지정한다.	all
transition-duration	트랜지션이 일어나는 지속시간을 지정한다.	0s
transition-timing-function	트랜지션 효과를 위한 수치 함수를 지정한다.	ease
transition-delay	프로퍼티가 변화한 시점과 트랜지션이 시작하는 시점 사이의 시간을 지정한다.	0s
transition	모든 트랜지션 프로퍼티를 한 번에 지정한다.

 

1. transition-property

Box model

width height padding margin

Background

background-color background-position

position

top left right bottom

text

color font-size font-weight

ect

opacity outline visibility

 

2. transition-timing-function

ease linear ease-in ease-out ease-in-out

ease는 천천히 변화하는 것을 의미한다.

 

3.transition

transition: property duration function delay