[CSS]전환 transition 속성 사용하기

transition 속성 - 요소의 전환

 

 transition 속성은 요소의 전환 효과를 지정하는 단축 속성입니다. 

 

기본형

transition: 속성 지속시간 타이밍함수 대기시간;   (지속시간은 필수 포함 속성!)

 

 

 다음과 같이 코드를 작성했을 때, <div> 요소에 마우스를 올리면 요소의 가로 너비는 200px, 배경색은 royalblue색으로 달라지는 것을 확인할 수 있는데요!

 

 이때, 요소가 변하는 순간에 아무런 효과와 시간없이 순식간에 바뀌게 됩니다.

 

 transition 속성을 사용하면 요소에 전환 효과를 줄 수 있습니다. 

 

 

 transition 속성은 단축속성이기 때문에 개별 속성이 존재합니다. 이제 이 개별 속성들을 차례대로 살펴봅시다.

 

개별 속성	설명
transition-property	전환 효과를 사용할 속성 이름을 지정
transition-duration	전환 효과의 지속시간을 지정 (필수 속성)
transition-timing-function	전환 효과의 타이밍 함수를 지정
transition-delay	전환 효과가 몇 초 뒤에 시작할지, 대기시간을 지정

 

 

 

 

transition-property 속성 - 전환 효과를 사용할 속성 지정

 

속성 값	설명
all	기본값, 모든 속성에 적용
속성 이름	전환 효과를 사용할 속성 이름 명시

 

 

 

transition-duration 속성 - 전환 효과의 지속시간을 지정

 

속성 값	설명
0	기본값, 전환 효과 없음
지속시간s	지속시간을 지정 (예 1s : 1초동안 지속)

 

 

 

 

transition-timing-function 속성 - 전환 효과의 타이밍(easing) 함수를 지정

 

속성 값	설명
ease	느리게-빠르게-느리게
linear	일정하게
ease-in	느리게-빠르게
ease-out	빠르게-느리게
ease-in-out	느리게-빠르게-느리게
cubic-bezier(n, n, n, n, n, n)	자신만의 값을 정의(n: 0~1) (권장 x)

 

 다음 사이트에 가서 타이밍 함수가 어떻게 동작하는지 살펴보세요!

 

https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function

<easing-function> - CSS: Cascading Style Sheets | MDN

https://greensock.com/docs/v2/Easing

Docs

 

 

 

 

 

 

transition-delay 속성 - 전환 효과가 몇 초 뒤에 시작할지 대기시간 지정

 

속성 값	설명
0	기본값, 대기시간 없음
시간s	대기시간을 지정