[CSS] transition 속성

📌 transition?

: transition이란 한 스타일에서 다른 스타일로 바뀌는 것을 말한다
👉 바뀌는 시간을 조절

transition: property값 | duration값 | timing-function값 | delay값

[timing-function값 종류]
1) linear: 시작에서 끝까지 똑같은 속도로 transition을 진행
2) ease(기본값): 처음에는 천천히 시작하고 점점 빨라지다가 마지막엔 천천히 끝남
3) ease-in: transition 시작을 느리게 함
4) ease-out: transition을 느리게 끝냄
5) ease-in-out: 느리게 시작하고 느리게 끝남

📌 block 요소에 transition을 적용했다면?

block 요소에 transition 속성을 적용하면,
해당 요소 외 다른 영역에 hover해도 transition 속성이 먹게된다
👉 따라서, 영역이 넘치지 않게 block요소를 inline-block으로 변경해야 한다!

📌 transition은 hover하기 전에 걸자!

: hover할 때 걸어도 되지만, 안 먹힐 때가 있으므로 hover하기 전(out)에 거는 것이 좋다

/* out */
#ex1 div{transition:all 1s;} /* 권장 */
/* in */
#ex1:hover div{transition:all 1s;} /* 지양 */

📌 transition/hover시 아래 항목이 따라 내려간다면?

: transition이나 hover를 적용했을 때, 세로 크기가 커져 아래 항목이 같이 내려가는 경우가 있다.

해결법
① 최상위 부모에 높이(height)를 설정한다
② 최상위 부모에 "position:relative;" 속성을 적용하고, 다음 부모에 "position:absolute;" 속성을 적용한다
③ 아래 항목(콘텐츠)보다 위로 올라오게 해야하므로 z-index에 높은 숫자를 적용한다

📚 Reference

: 국비지원 수업