[CSS] transition 속성

1. transition(트랜지션 기본) 속성: transition : width 1s;

- CSS스타일 + 시간

2. transition-timing-funciton(트랜지션 타임) 속성:

- 변화의 중간 과정에서 움직임이 어떻게 계산되는지를 정합니다.

1) linear : 직선처럼 처음부터 끝까지 일정한 속도로 진행

2) ease : 처음엔 천천히, 점점 빨라졌다가 다시 천천히

3) ease-in : 전환이 천천히 시작

4) ease-out : 전환이 천천히 끝남

5) ease-in-out : 천천히 시작되고 천천히 끝남

6) cubic-bezier(n,n,n,n) : 사용자가 정의한대로 진행

3. transition-delay 속성: 효과 지연시간

- 전환 효과가 나타나기 전까지 지연시간을 설정하는것 / 이 시간이 지나야 효과가 발생

- 기본값 0

6. transition-duration :

- 변화가 일어나는 시간 간격

- transition-duration: 1s

4. transition-property (변화가 일어날 속성을 명시):

- 쉼표써서 여러개의 속성 동시에 지정 가능 ex) transition-property: opacity;

5. transition(전환효과): width 2s, height 2s, transform(변형 효과) 2s; 동시적용

ex) transform: rotateY(180deg);