1. transition

✅ 문법 : { transition: property, timing-function, duration, delay}

 

▪ property: transition을 적용시킬 속성을 정한다.

 

   - all : 모든 속성에 적용한다. 

 

   - property : 속성을 정한다. 여러 개일 경우 쉼표로 구분한다.

                   ex) transition-property: width, background-color; 

 

▪ timing-function : transition의 진행 속도를 조절한다. 

 

    ease, linear, ease-in/out 등이 있다.

 

▪ delay : transition이 시작하는 시간을 연기할 수 있다.

 

    시간 단위는 초(s) 또는 1/1000초(ms) 를 사용한다.

    ex) transtion-delay: 0.5s;