웹 페이지의 움직임에는 시작 조건, 걸리는 시간, 속도의 변화와 끝나는 상태가 있다. [[CSS 시]]나 전시 초대장의 작은 움직임도 이 시간을 어떻게 배치하느냐에 따라 다른 리듬을 만든다.
- **전환:** `transition`은 상태가 바뀔 때 속성값이 변하는 시간을 정한다. 포인터를 올렸을 때와 키보드 초점이 왔을 때를 함께 살핀다.
- **애니메이션:** `@keyframes`는 중간 단계를 정의하고 반복 여부 등을 정할 수 있다. 반복 재생이 필요한지부터 판단한다.
- **멈춘 상태:** 아래 예제는 기본 상태에서 움직이지 않는다. 움직임 감소를 요청하지 않은 환경에서만 짧은 전환을 더한다.
- **조작:** 움직임이 없어도 하이퍼링크의 목적과 기능은 같다. 터치 화면에서 포인터 올리기를 반드시 거치도록 만들지 않는다.
## 한 파일로 확인하기
아래 전체 코드를 UTF-8 형식의 `example-06.html` 파일로 저장해 웹 브라우저에서 연다. 예제의 전시와 행사는 가상이다.
```html
움직임의 시간표: 제작 예제
다음 방의 문장
가상의 전시 초대장입니다.
관람 안내 읽기→
관람 안내
이 예제는 실제 전시를 안내하지 않습니다.
```
`Tab`으로 하이퍼링크에 이동했을 때 초점 표시와 화살표를 확인한다. 운영체제에서 움직임 감소를 켜면 화살표가 그대로 머물러야 한다. [[미디어 쿼리]]는 화면 크기 외의 조건에도 응답하며, [[멈춰 있어도 읽히는 초대장]]을 만드는 데 쓸 수 있다.
## 참고
- [셰이 하우: 전환과 애니메이션](https://learn.shayhowe.com/advanced-html-css/transitions-animations/)
- [MDN: transition](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition)
- [MDN: 움직임 감소 선호](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion)
#HTML #CSS #움직임 #접근성