keyframes 애니메이션

개념 이해하기

@keyframes는 시간에 따른 상태를 만들고 animation 속성이 이름, 시간, 반복, 방향을 연결합니다. 의미 없는 반복 움직임은 집중을 방해하므로 목적과 감소 설정을 고려합니다.

span은 원래 인라인 요소라 width와 height가 적용되지 않지만, 부모 .target이 flex 컨테이너라 flex 항목으로 바뀌면서 12px 원이 됩니다. pulse는 900ms 동안 점을 0.65배에서 1.25배로 키우며 불투명도도 함께 올리고, alternate 때문에 다음 900ms는 거꾸로 돌아와 한 번 커졌다 작아지는 데 1.8초가 걸립니다. 동작 줄이기를 켠 사용자에게는 미디어 쿼리가 animation: none으로 점을 멈춰 둡니다.

@keyframes에서 from이나 to를 생략하면 그 자리는 요소에 원래 적용된 값으로 채워집니다. 그래서 to에만 transform: scale(1.25)를 적으면 현재 크기에서 출발해 커지는 애니메이션이 되어, 시작 상태를 두 곳에 중복해 적지 않아도 됩니다.