animations

개념 이해하기

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

이번 예제의 출발점은 @keyframes pulse { from {...} to {...} }입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.

처음에는 예제를 그대로 확인한 다음 alternate를 제거하고 keyframe에 중간 단계를 추가하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.