transition 요소의 속성값을 자연스럽게 바꿔주기 위해 사용합니다.
property 요소의 속성중 어떤 속성을 바꿀지를 결정해줍니다.
태그의 클래스에 active가 추가되면 폰트의 사이즈를 바꾸도록 설정했습니다.
active가 추가되자 폰트의 사이즈가 바뀌는 것을 알 수 있습니다
바꿔줄 속성을 정했으면 다음으로는 지속시간을 설정해줘야 합니다. 1초당 1s, 1000ms 의 값을 줘야 합니다.
박스 태그의 클래스에 active가 추가되면 폰트 사이즈, 색상 요소 모두
3초에 걸쳐서 바뀌도록 설정했습니다.
클래스에 active가 추가되자 3초에 걸쳐 화면과 폰트 사이즈가 바뀌는 것을 볼 수 있습니다.
timing-function 사용한다면 지속시간동안 어떤식으로 변화할지를 설정해줄 수 있습니다.
위와 같이 cubic-bezier 의 값을 이용해서 4000ms에 걸쳐 화면이 변하도록 할 수 있습니다.
delay 를 사용해서 transition이 바로 적용되지 않고 지연시간을 줄 수 있습니다.
3000ms의 지연시간이 지난 후 모든 요소들을 4000ms 걸쳐 ease-in-out 방식으로 transition되도록 설정해주게 되면
3000ms 시간이 지난 후 글자 크기와 색상이 바뀌는것을 볼 수 있습니다.
???