CSS / 애니메이션 / transition / 속성을 서서히 변화시키는 속성

transition은 CSS 속성 값이 한 상태에서 다른 상태로 바뀔 때 중간 값을 시간에 따라 표시하는 전환 효과입니다. 전환할 속성, 지속 시간과 변화 전후의 값이 있어야 하며 transition 선언만으로 변화가 저절로 반복되지는 않습니다. hover·focus·checked 같은 상태나 클래스 변경을 계기로 값이 달라질 때 작동합니다.

전환 대상·시간·속도·지연 설정하기

예를 들어 transition: transform 0.8s ease 0.3s는 transform을 0.3초 뒤부터 0.8초 동안 ease 곡선으로 전환합니다. 한 항목에 시간 값이 두 개 있으면 첫 시간이 duration, 두 번째가 delay입니다. 여러 속성은 쉼표로 구분하며 각각 다른 시간과 곡선을 정할 수 있습니다.

all은 전환 가능한 바뀐 속성들을 폭넓게 대상으로 삼습니다. 나중에 관련 없는 스타일을 추가했을 때까지 뜻하지 않게 움직이지 않도록 예제에서는 transform과 background-color를 명시합니다. 모든 속성이 부드러운 중간 값으로 변하는 것은 아니며, display 같은 이산 속성을 다루는 고급 전환은 기본 이동·색상 예제와 조건을 구분해야 합니다.

전체 예제: 체크박스로 이동과 색 전환하기

아래 코드를 transition.html로 저장해 브라우저에서 엽니다. 마우스로 체크하거나 Tab으로 체크박스에 이동한 뒤 Space로 전환할 수 있습니다. JavaScript와 외부 파일은 필요하지 않습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>체크 상태로 전환 실습하기</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
    h1 { font-size: 24px; }
    label { display: inline-block; padding: 10px 4px; }
    .stage { max-width: 500px; margin-top: 16px; padding: 12px;
      border: 1px solid #8fa6ba; background: #edf3fa; }
    .box { display: grid; place-items: center; width: 80px; height: 80px;
      color: white; background-color: #1768a5; transform: translateX(0);
      transition: transform 0.8s ease, background-color 0.8s linear; }
    #move:checked ~ .stage .box { transform: translateX(150px); background-color: #087b76; }
    @media (prefers-reduced-motion: reduce) {
      .box { transition: none; }
    }
  </style>
</head>
<body>
<h1>transition 상태 비교</h1>
<input id="move" type="checkbox">
<label for="move">오른쪽 이동 상태 켜기</label>
<div class="stage"><div class="box">상자</div></div>
<p>체크하면 오른쪽으로 이동하며 색이 바뀌고, 해제하면 원래 상태로 돌아옵니다.</p>
</body>
</html>

체크하면 파란 상자가 오른쪽으로 150px 이동하면서 초록색으로 바뀝니다. 체크를 해제하면 같은 시간 설정으로 원래 위치와 색으로 돌아옵니다. 이동은 ease, 색 변화는 linear를 사용하므로 전환 중의 진행 방식은 다를 수 있지만 둘 다 0.8초 뒤 목표 값에 도달합니다. 동작 줄이기 환경에서는 중간 움직임 없이 새 상태가 바로 적용됩니다.

설정을 하나씩 바꾸어 동작 비교하기

동작 줄이기 설정이 켜져 있으면 아래 시간·곡선 비교보다 전환 생략 동작이 우선합니다. 시간 변화를 관찰할 때는 본인에게 편안한 환경에서 해당 설정을 확인하세요. 예제의 일반 .box 규칙에 transition-duration: 2s만 추가하면 두 전환이 모두 더 오래 걸립니다. 확인 후 선언을 제거해 0.8초로 되돌립니다. 이번에는 transition-delay: 0.5s를 추가해 체크 직후 잠시 멈춘 다음 시작하는지 확인하고, 다시 제거합니다.

ease와 linear의 차이를 보기 위해 transform 항목의 ease만 linear로 바꿔 보세요. 같은 150px 이동과 0.8초를 유지하면서 속도 곡선만 바꾸는 비교입니다. 시작과 끝 위치는 같고 진행 방식이 달라져야 합니다. 초보 실습에서는 전환 전후에 계산 가능한 길이·색·transform 값을 명확하게 지정하면 문제를 찾기 쉽습니다.

transition 선언은 :checked 규칙이 아니라 기본 .box에 두었습니다. 이렇게 해야 체크할 때와 해제할 때 모두 전환 설정을 유지합니다. 선언을 상태 규칙에만 넣으면 원래 상태로 돌아갈 때 전환이 빠지는 등 기대와 다른 결과가 생길 수 있습니다. 중간에 상태를 다시 바꾸면 현재 표시 상태에서 새 목표로 이어질 수 있으므로 무조건 처음부터 같은 장면을 재생한다고 생각하지 마세요.

효과가 안 보일 때와 동작 줄이기

먼저 체크 전후의 목표 값이 실제로 다른지, transition-property에 바뀌는 속성이 포함되어 있는지, duration이 0s가 아닌지 확인합니다. 다른 CSS가 transition을 덮어쓴 경우 개발자 도구의 계산된 값을 보고, 여러 시간·속성 목록이 의도한 순서로 대응하는지도 확인하세요. 단축 속성을 다시 선언하면 앞서 지정한 개별 전환 설정이 초기화될 수 있습니다.

prefers-reduced-motion은 사용자가 동작을 줄이도록 요청한 환경을 CSS에서 감지합니다. 예제는 이 경우 전환만 제거하고 체크 상태와 내용은 유지합니다. 실제 서비스에서도 움직임이 없어졌다는 이유로 결과나 조작 기능이 사라지지 않아야 합니다. 반복 재생이나 여러 단계의 자동 진행이 필요하면 transition과 별개인 animation·@keyframes를 검토할 수 있습니다.

현재 단축 속성의 구성과 전환 규칙은 MDN의 transition 설명, 동작 줄이기 조건은 prefers-reduced-motion 설명을 참고할 수 있습니다.