전환효과

요소의 스타일, 속성이 변경될 때 그 변화를 지정된 시간 동안 애니메이션처럼 보여주는 효과

transition-property

트랜지션을 적용해야 하는 CSS 속성을 명시

transition-property: width, height, backgroundcolor;

transition-duration

트랜지션이 일어나는 지속 시간

transition-duration: 2s;

transition-delay

트랜지션이 일어나기 전 지연 시간

transition-delay: 1s;

transition-timing-function

트랜지션 효과의 속도 함수

 transition-timing-function: ease;

ease (디폴트): 느리게 시작되어 중간에 빨라지고, 다시 느려지는 속도 곡선.
linear: 선형 속도 곡선.
ease-in: 느리게 시작되어 점점 빨라지는 속도 곡선.
ease-out: 빠르게 시작되어 천천히 느려지는 속도 곡선.
ease-in-out: 느리게 시작되어 중간에 보통의 속도로 가다가, 다시 느려지는 속도 곡선

*대부분의 타이밍 함수는 큐빅 베이지어(cubic bezier)를 정의하는 네 점에 의해 정의되므로 상응하는 함수의 그래프로 제공해서 명시할 수 있다.

transition

transition 속성을 한 번에 지정할 수 있는 축약형이다. property duration timing function delay 순이다.

 transition: all 1s ease 1s;

출처
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_transitions/Using_CSS_transitions