transition

전환(transition — 자료에 따라 트랜지션)은 CSS 속성의 값이 바뀔 때 앞 값에서 새 값까지를 정한 시간 동안 이어 그리는 것입니다. 이어 그릴 속성과 시간을 transition에 적습니다.

8단원에서 :hover로 마우스를 올린 단추의 바탕색을 바꿨습니다. 그 색은 한순간에 바뀌고 한순간에 돌아옵니다. 카드가 떠오르거나 색이 바뀌는 일이 눈 깜짝할 새에 일어나면 무엇이 바뀌었는지 놓치기 쉽습니다. 전환은 바뀌는 과정을 짧게 보여 줍니다. 이 레슨은 마우스를 올릴 때와 뗄 때 각각 어느 규칙의 transition이 쓰이는지를 봅니다. 마우스를 올리는 일은 컴퓨터에서 해 봅니다 — 터치 화면에서는 기기마다 다르게 보입니다.

이 단원을 마치면 레시피 카드가 마우스를 올리면 살짝 떠오르고, 움직임 줄이기 설정에서는 떠오르지 않으며, 어두운 화면 설정에서는 변수 값만 바꿔 어두워지는 레시피 노트를 만들 수 있습니다. 이 단원(움직임과 다크 모드)을 이미 안다면 단원 연습 문제부터 풀고 틀린 레슨만 보세요. 건너뛸지 볼 때는 힌트를 펴지 않고 풉니다.

그림 준비 중

1바뀌는 과정을 이어 그린다

전환이 없는 단추입니다. 결과 화면의 단추에 마우스를 올렸다 떼면 바탕이 한순간에 바뀌고 돌아옵니다.

<button>찾기</button>

button {
  background-color: #f5f5f7;
}

button:hover {
  background-color: #d2d2d7;
}

기본 규칙에 transition 한 줄을 더합니다. 이번에는 두 회색 사이가 짧게 이어집니다. 아래 잰 값은 마우스를 올리고 전환이 끝난 뒤의 값입니다.

<button>찾기</button>

button {
  background-color: #f5f5f7;
  transition:
    background-color 180ms ease;
}

button:hover {
  background-color: #d2d2d7;
}

선언은 세 칸으로 읽습니다.

0.18초를 기다렸다가 바뀌는 것이 아니라, 바뀌는 과정 전체가 0.18초입니다. 끝 색은 여전히 :hover 규칙이 정합니다 — transition은 그 값까지 가는 과정만 정합니다.

transition도 짧게 적기라 적지 않은 칸은 처음 값으로 되돌립니다(브라우저 규칙 4). 곡선을 빼면 처음 값 ease입니다.

<button>찾기</button>

button {
  transition:
    background-color 180ms;
}

곡선에는 linear(처음부터 끝까지 같은 빠르기) · ease-out(빠르게 시작해 천천히 끝남) 같은 값도 있습니다.

2바뀔 값은 상태 규칙에, 전환은 기본 규칙에

값이 바뀔 때 브라우저는 바뀐 뒤 그 요소에 닿는 transition으로 이어 그립니다. 마우스를 올릴 때는 :hover 규칙까지 닿은 상태가, 뗄 때는 기본 규칙만 닿은 상태가 '바뀐 뒤'입니다.

그래서 transition을 :hover 규칙에만 두면 마우스를 뗄 때 툭 돌아옵니다. 마우스를 뗀 단추에는 기본 규칙만 닿는데, 그 규칙에는 전환이 없어 시간이 처음 값 0초입니다.

<button>찾기</button>

button {
  background-color: #f5f5f7;
}

button:hover {
  background-color: #d2d2d7;
  transition:
    background-color 180ms ease;
}

transition을 기본 규칙에 두면 :hover 상태에도 그 선언이 그대로 닿아, 올릴 때와 뗄 때 모두 같은 시간으로 이어집니다. 맡은 일을 나누면 이렇습니다.

3여러 속성은 쉼표로 · 움직임 만들기는 @keyframes

두 속성을 이어 그리려면 쉼표로 잇고, 한 줄에 하나씩 씁니다. 다음 레슨에서 카드를 옮기는 transform도 이렇게 함께 적습니다.

.card {
  transition:
    background-color 180ms ease,
    transform 180ms ease;
}

전환은 두 상태 사이를 한 번 잇습니다. 상태가 바뀌지 않아도 스스로 도는 움직임(빙글빙글 도는 표시 같은 것)은 여러 시점의 모양을 @keyframes로 정해 만드는 애니메이션(animation)입니다. 이 과목에서는 이름만 알아 둡니다.

예제

후기 남기기 단추

레시피 노트 후기 폼의 단추에 마우스를 올리면 강조색이 조금 짙어지게 합니다. 아래 잰 값은 마우스를 올리고 전환이 끝난 뒤의 값입니다.

<button type="submit">
  후기 남기기
</button>

:root {
  --accent: #005bb5;
}

button {
  color: #ffffff;
  background-color:
    var(--accent);
  transition:
    background-color 180ms ease;
}

button:hover {
  background-color: #00468c;
}

transition이 기본 규칙에 있어 마우스를 뗄 때도 0.18초 동안 강조색으로 돌아옵니다. 결과 화면의 단추에 마우스를 올렸다 떼며 봅니다.

자주 틀리는 곳

틀린 생각: transition: all로 적어 두면 편하다.

<button>찾기</button>

button {
  transition: 180ms;
}

속성 칸을 빼면 처음 값 all이 됩니다. all은 값이 바뀌는 속성을 모두 이어 그립니다. 지금은 색만 바뀌어 괜찮아 보여도, 뒤에 :hover에 padding을 더하면 단추가 0.18초 동안 자라며 옆 글을 밀어냅니다.

맞는 규칙: 이어 그릴 속성은 이름으로 적습니다. 무엇이 움직이는지 코드에서 읽히고, 나중에 더한 선언이 뜻밖에 움직이지 않습니다.

틀린 생각: 오래 걸릴수록 부드럽다.

button {
  transition:
    background-color 1.5s ease;
}

단추를 지나갈 때마다 1.5초 동안 중간 색이 보입니다. 마우스가 이미 떠났는데도 색은 아직 바뀌는 중이라, 쓰는 사람이 바뀌기를 기다리게 됩니다.

맞는 규칙: 자주 오가는 상태는 짧게 잇습니다 — 0.2초 안팎이면 충분합니다. 1초를 넘기면 기다리게 됩니다.

틀린 생각: transition을 적으면 그 요소의 바뀌는 값이 모두 이어진다.

<button>찾기</button>

button {
  transition:
    transform 180ms ease;
}

button:hover {
  background-color: #d2d2d7;
}

바탕색은 한순간에 바뀝니다. 이어 그리는 속성은 transform인데, 마우스를 올려 바뀐 값은 background-color입니다.

맞는 규칙: 적은 속성의 값이 바뀔 때만 이어 그립니다. 상태 규칙이 바꾸는 속성과 transition에 적은 속성이 같은지 봅니다.

확인 문제

1. 예제에서 180ms를 600ms로 바꿉니다. 마우스를 올리고 전환이 다 끝난 뒤 단추의 바탕색은 무엇일까요?

• ① :hover 규칙의 #00468c
• ② 처음 색과 :hover 색의 중간 색
• ③ 처음 색 #005bb5

<button>후기 남기기</button>

button {
  background-color: #005bb5;
  transition:
    background-color 600ms;
}

button:hover {
  background-color: #00468c;
}

2. 카드에 마우스를 올리면 테두리 색이 바뀝니다. 테두리 색만 0.2초 동안 이어지게 ____ 자리를 채우세요.

.card {
  border: 2px solid #d2d2d7;
  transition: ____ 200ms ease;
}

.card:hover {
  border-color: #005bb5;
}

<div class="card">잡채</div>

.card {
  border: 2px solid #d2d2d7;
  transition:
    border-color 200ms ease;
}

.card:hover {
  border-color: #005bb5;
}

3. 플로우 카페 메뉴판의 메뉴 줄입니다. 마우스를 올릴 때와 뗄 때 각각 몇 초 동안 바탕색이 바뀔까요?

<p class="row">녹차 3500</p>

.row {
  transition:
    background-color 400ms;
}

.row:hover {
  background-color: #fff3c4;
  transition:
    background-color 100ms;
}

• ① 올릴 때 0.1초 · 뗄 때 0.4초
• ② 올릴 때 0.4초 · 뗄 때 0.4초
• ③ 올릴 때 0.4초 · 뗄 때 0.1초

<p class="row">녹차 3500</p>

.row {
  transition:
    background-color 400ms;
}

.row:hover {
  background-color: #fff3c4;
  transition:
    background-color 100ms;
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 예제의 HTML과 CSS를 index.html과 style.css로 저장하고 link로 이어 엽니다(문서 뼈대의 body 안에 예제 HTML을 넣습니다). transition 두 줄을 button:hover 규칙 안으로 옮겨 저장하고 새로고침합니다. 단추에 마우스를 올릴 때와 뗄 때 색이 바뀌는 모습을 견줘 봅니다.