@keyframes
: CSS 애니메이션 과정의 중간 절차를 제어
: from/to, %별로 지정 가능
div {
animation-name: around; /* 이름 정의 */
animation-duration: 1s; /* 몇초동안 애니메이션을 할건지 정의 */
animation-iteration-count: infinite; /* 무한으로 실행 */
animation-delay: 3s; /* 딜레이 추가 */
}animation-play-state: running; -> 멈추고 싶을 때 paused
animation-timing-function 종류
- ease (가장 많이 쓰이는 기본 자연스러운 움직임)
: 시작-느림, 중간-빠름, 끝-느림 (ex. 버튼 hover, 카드 등장) - ease-in (점점 가속)
: 시작-매우 느림, 끝-빠름 (ex. 물체가 출발하는 느낌, 아래에서 위로 튀어오르는 요소) - ease-out (멈추는 느낌 강조)
: 시작-빠름, 끝-느림 (ex. 모달, 팝업 닫힐 때, 요소가 제자리 안에 안착하는 모션) - ease-in-out (가장 부드러운 곡선)
: 시작-느림, 중간-빠름, 끝-느림 (ex.고급스러운 UI 모션, 페이지 전환 효과) - linear (기계적인 느낌)
: 처음부터 끝까지 같은 속도 (ex.로딩 스피너, 무한 회전 애니메이션) - cubic-bezier (고급)
: 사용자 임의로 정할 수 있음 (ex. 디자인 시스템, 포폴에서 자주 사용)
https://cubic-bezier.com/
:root
: CSS의 전역 설정 장소 root == html
