🍕 Transition

Transition

    - click, mouseover 등의 event발생시 적용됩니다.

    - 요소에 애니메이션을 줘서 자연스럽게 변화할 수 있게 해줍니다.

    - property, duration, [timing-function], [delay]

    - property -> 변화가 일어날 속성

    - duration -> 지속시간, transition이 일어나는 시간 (ms, s)

.box {
	font-size : 24px;
	background-color : red;
	transition : font-size 2.5s;
  /* 폰트가 변할때만 */
	transition : font-size 2.5s, backgorund-color 1s;
	/* 둘 다변화 시키는데 따로따로 줄때 */
	transition : all 2.5s;
	/* 여러 trasition을 한번에 */
}

.box.active {
	font-size : 30px;
	background-color : blue;
}

    - [timing-function] -> 변화의 속도 지정 (생략가능)

        => ease-in | ease-out | ease-in-out | cubic-bezier()

        => 천천히-빠르게 | 빠르게-천천히 | - | 속도 custom

.box {
	font-size : 24px;
	background-color : red;
	transition : font-size 2.5s ease-in;
}

.box.active {
	font-size : 30px;
	background-color : blue;
}

    - delay -> 지연시간 (~ 초 후), 생략가능

.box {
	font-size : 24px;
	background-color : red;
	transition : font-size 2.5s ease-in 1s;
}

.box.active {
	font-size : 30px;
	background-color : blue;
}