animation-timint-function

ease -> 시작 느림 중간 빠름 끝 느림(버튼 hover, 카드 등장 등)
ease-in -> 시작은 매우 느림 끝은 빠름(점점 가속, 물체가 출발하는 느낌, 아래에서 위로 튀어 오르는 요소)
ease-out -> 시작은 빠름 끝은 느림(멈추는 느낌 강조, 모달, 팝업 닫힐 때, 요소가 제자리 안에 안착하는 모션)
ease-in-out -> 시작 느림 중간 빠름 끝 느림(가장 부드러운 곡선, 고급스러운 UI 모션, 페이지 전환 효과)
linear -> 일정한 속도(기계적인 느낌, 로딩 스피너, 무한 회전 애니메이션)
cubic-bezier(고급) -> 사용자 임의로 정할 수 있음(디자인 시스템이나 포트폴리오에서 자주 사용)

https://codepen.io/KangEunsu1/pen/Ggqvoqw

root

-css의 전역 설정 장소
:root == html
root << 우선순위 더 높음