[DEV] CSS 전환

transiton : 요소의 전환(시작과 끝)효과를 지정하는 단축 속성

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

개별 속성들

transition-property : 전환 효과를 사용할 속성 이름을 지정

all(기본값) : 모든 속성이 적용
속성이름 : 전환 효과를 사용할 속성 이름 명시

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

0s(기본값) : 전환 효과 없음
시간 : 지속시간(s)을 지정

transition-timing-function : 전환 효과의 타이밍(Easing) 함수를 지정

ease(기본값) : 느리게 - 빠르게 - 느리게
linear : 일정하게
ease-in : 느리게 - 빠르게
ease-out : 빠르게 - 느리게
ease-in-out : 느리게 - 빠르게 - 느리게
cubic-nezier(n,n,n,n) : 자신만의 값을 정의 (잘 사용하지 않음)

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

0s(기본값) : 대기시간 없음
시간 : 대기시간(s)을 지정