웹 페이지의 움직임에는 시작 조건, 걸리는 시간, 속도의 변화와 끝나는 상태가 있다. CSS 시나 전시 초대장의 작은 움직임도 이 시간을 어떻게 배치하느냐에 따라 다른 리듬을 만든다.
- 전환:
transition은 상태가 바뀔 때 속성값이 변하는 시간을 정한다. 포인터를 올렸을 때와 키보드 초점이 왔을 때를 함께 살핀다. - 애니메이션:
@keyframes는 중간 단계를 정의하고 반복 여부 등을 정할 수 있다. 반복 재생이 필요한지부터 판단한다. - 멈춘 상태: 아래 예제는 기본 상태에서 움직이지 않는다. 움직임 감소를 요청하지 않은 환경에서만 짧은 전환을 더한다.
- 조작: 움직임이 없어도 하이퍼링크의 목적과 기능은 같다. 터치 화면에서 포인터 올리기를 반드시 거치도록 만들지 않는다.
한 파일로 확인하기
아래 전체 코드를 UTF-8 형식의 example-06.html 파일로 저장해 웹 브라우저에서 연다. 예제의 전시와 행사는 가상이다.
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>움직임의 시간표: 제작 예제</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 1rem; color: #202020;
background: #fff; font-family: sans-serif; line-height: 1.7; }
main { max-inline-size: 44rem; margin-inline: auto; }
h1 { font-size: 1.75rem; line-height: 1.3; }
a { color: #164d91; }
:focus-visible { outline: 3px solid #164d91; outline-offset: 4px; }
.invite { display: inline-block; padding: .75rem; border: 1px solid currentColor; }
.arrow { display: inline-block; margin-inline-start: .4rem; }
@media (prefers-reduced-motion: no-preference) {
.arrow { transition: transform 180ms ease-out; }
.invite:is(:hover, :focus-visible) .arrow { transform: translateX(.25rem); }
}
</style>
<main>
<h1>다음 방의 문장</h1>
<p>가상의 전시 초대장입니다.</p>
<a class="invite" href="#visit">관람 안내 읽기<span class="arrow" aria-hidden="true">→</span></a>
<section id="visit">
<h2>관람 안내</h2>
<p>이 예제는 실제 전시를 안내하지 않습니다.</p>
</section>
</main>
</html>Tab으로 하이퍼링크에 이동했을 때 초점 표시와 화살표를 확인한다. 운영체제에서 움직임 감소를 켜면 화살표가 그대로 머물러야 한다. 미디어 쿼리는 화면 크기 외의 조건에도 응답하며, 멈춰 있어도 읽히는 초대장을 만드는 데 쓸 수 있다.