CSS. transition이란?

아주~ 자연스럽게~~~

transition이란?

transition이란 정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있습니다.

부드럽게 연출을 하여, 자연스러운 변화를 유도합니다.

 

transition 속성

transition의 속성은 다음과 같습니다.

 

1. transition

transition: all -> transform, background, border-radius 등 속성을 각각 작성하지 않아도 all 을 입력해주면, 모든 속성에 효과가 나타납니다.

2. transition-delay

transition-delay 속성은 transition 효과가 나타나기 전까지의 지연 시간을 설정합니다.

이 효과는 설정된 시간이 흐른 뒤에야 비로소 시작됩니다.

3. transition-duration

transition 효과가 지속될 시간을 설정합니다.

4. transition-property

원하는 애니메이션 속성을  입력합니다.

 

ex) color, background-color, border-radius, position 등

5. transition-timing-function

transition-timing-function 속성은(transition 효과의 시간당 속도를 설정합니다.

 

1. linear : 일정한 속도로 진행

2. ease : 기본값, 효과가 천천히 시작되어 빨라지다 다시 느려짐

3. ease-in : 천천히 시작

4. ease-out : 천천히 끝남

5. ease-in-out : 천천히 시작되어, 천천히 끝남

6. cubic-bezier(n,n,n,n) : 사용자가 정의한 cubic-bezier 함수에 따라 진행