[CSS] Transition 속성과 사용법

[ Transition 기본문법 ]

transition: transition-property | transition-duration | transition-timing-function | transition-delay

* transition-property : css 속성을 지정함.

* transition-duration : 트렌지션 실행 시간. 기본값 0s

* transition-timing-function : 트렌지션이 실행되는 동안 속도 설정

* transition-delay : 언제 트렌지션을 시작할지 지정

*일반적으로 이렇게 한줄로 사용한다 : transition:all 0.3s ease 0;

transition: 속성명 시간 효과 딜레이시간;

[ Transition 속성 ]

기본적으로는 all 을 사용하지만 특정 값만 트랜지션을 주고 싶을때 해당 속성명을 쓰면됩니다.

트랜지션에서 지원하는 속성명은 아래와 같습니다.

Property Name	Type
background-color	as color
background-position	as repeatable list of simple list of length, percentage, or calc
border-bottom-color	as color
border-bottom-width	as length
border-left-color	as color
border-left-width	as length
border-right-color	as color
border-right-width	as length
border-spacing	as simple list of length
border-top-color	as color
border-top-width	as length
bottom	as length, percentage, or calc
clip	as rectangle
color	as color
font-size	as length
font-weight	as font weight
height	as length, percentage, or calc
left	as length, percentage, or calc
letter-spacing	as length
line-height	as either number or length
margin-bottom	as length
margin-left	as length
margin-right	as length
margin-top	as length
max-height	as length, percentage, or calc
max-width	as length, percentage, or calc
min-height	as length, percentage, or calc
min-width	as length, percentage, or calc
opacity	as number
outline-color	as color
outline-width	as length
padding-bottom	as length
padding-left	as length
padding-right	as length
padding-top	as length
right	as length, percentage, or calc
text-indent	as length, percentage, or calc
text-shadow	as shadow list
top	as length, percentage, or calc
vertical-align	as length
visibility	as visibility
width	as length, percentage, or calc
word-spacing	as length
z-index	as length