[CSS] transition

1. transition이란

: CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공한다.

: 속성 변경이 즉시 일어나게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있다.

 

transition 적용 전 / 적용 후

 

 

2. transition의 속성들

transition

: transition을 적용할 속성을 작성한다. 

: transition을 적용할 속성과 지속될 시간을 설정한다. 

transition: height;
transition: all 0.1s;

 

transition-timing-function

: 전환 효과의 시간당 속도를 설정한다.

• linear: 전환 효과가 처음부터 끝까지 일정한 속도로 진행된다.
• ease: 기본값으로, 전환 효과가 천천히 시작되어, 그 다음에는 빨라지고, 마지막에는 다시 느려진다.
• ease-in: 전환 효과가 천천히 시작된다. 
• ease-out: 전환 효과가 천천히 끝난다.
• ease-in-out: 전환 효과가 천천히 시작되어, 천천히 끝난다.
• cubic-bezier(n,n,n,n): 전환 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행된다. 

transition-timing-function: ease;

 

transition-delay

: 전환 효과가 나타나기 전까지의 지연 시간을 설정한다. 

: 전환 효과는 이 메소드로 설정된 시간이 흐른 뒤에야 시작될 수 있다.

transition-delay: 1s;

 

transition-property

: 요소에 추가 할 전환 효과를 설정한다.

 

transition-duration

: 전환 효과가 지속될 시간을 설정한다.