CSS - 전환 효과 속성

한 요소의 스타일 속성값을 다른 속성으로 변하게 함 → 전환

 

전환을 제어할 수 있는 효과 속성

 

(부드러운 전환효과 발생 최소 필요)

transition-property: all;

none, background-color(정확한 속성명)

transition-duration: 2s; 

 

전환효과 발생 전 지연시간

trasition-delay: 2s;

총 전환효과 발생 시간은 같지만, 2초에 도달하기 까지의 과정에 차이를 둘 수 있음

trasition-timing-function: line;

ease, ease-in, ease-in-out, ease-out, cubic-bezier() → 사용자 정의 속도

 

transition → 단축(축약) 속성

ex.

transition: background-color 2s linear 3s, width 2s linear 3s;