0Pricing
Frontend Academy · 강의

트랜지션: 속성, 지속 시간, 타이밍

트랜지션을 추가해 CSS 속성 변경을 부드럽게 애니메이션하고, 적절한 지속 시간을 선택하며, ease-in-out 같은 이징 함수를 사용합니다.

트랜지션: 속성, 지속 시간, 타이밍은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

CSS 전환이란 무엇인가요

CSS 전환은 속성이 변경될 때(마우스를 올리거나, 포커스를 받거나, 클래스를 전환할 때) 속성을 한 값에서 다른 값으로 애니메이션합니다. 이는 선언적 방식이므로 어떤 속성을 어떻게 전환할지 CSS에 지정하면 나머지는 브라우저가 처리합니다.

기본 문법

transition: property duration timing-function delay. 여러 전환은 쉼표로 구분하여 나열할 수 있습니다.

.btn {
  background: #6366f1;
  transition: background-color 0.2s ease;
}
.btn:hover {
  background: #4f46e5;
}
// Browser smoothly animates the colour change

속성 값

전환할 속성을 지정하십시오. 모든 애니메이션 가능한 속성을 전환하려면 all을 사용할 수 있지만, 관련 없는 속성에 원치 않는 전환이 발생할 수 있습니다. 성능과 예측 가능성을 위해 명시적으로 지정하십시오.

.card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.15s linear;
}

/* Avoid 'all' in most cases */
.risky { transition: all 0.3s; }

지속 시간 — 얼마나 오래

전환 시간은 s(초) 또는 ms(밀리초)로 지정합니다. 짧은 시간(100~200ms)은 미세 상호작용에 사용합니다. 중간 시간(200~400ms)은 구성 요소 상태 변경에 사용합니다. 더 긴 시간(400ms 이상)은 페이지 수준 애니메이션에 사용합니다.

타이밍 함수 — 움직임의 느낌

타이밍 함수는 가속 곡선을 제어합니다. 일반적인 값은 ease(기본값: 느린 시작, 빠른 중간, 느린 끝), linear(일정한 속도), ease-in(느리게 시작), ease-out(느리게 끝남), ease-in-out입니다. 사용자 지정 곡선은 cubic-bezier(x1, y1, x2, y2)로 지정합니다.

.btn { transition: transform 0.2s ease-out; }
.toast { transition: opacity 0.3s ease-in-out; }
/* Custom cubic-bezier from cubic-bezier.com: */
.spring { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

지연 — 시작 시점

전환 지연은 지정된 시간이 지난 후 애니메이션을 시작합니다. 여러 요소의 시작 시점을 단계적으로 늦추거나 마우스를 빠르게 움직일 때 실수로 hover가 실행되는 것을 방지하는 데 사용합니다.

.dropdown-menu {
  opacity: 0;
  transition: opacity 0.2s ease 0.1s; /* 100ms delay */
}
.dropdown:hover .dropdown-menu {
  opacity: 1;
}

transitionend 이벤트

JavaScript에서는 transitionend 이벤트를 사용해 전환이 끝나는 시점을 감지할 수 있습니다. 페이드 아웃 후 요소를 제거하거나 시퀀스의 다음 단계를 실행할 때 유용합니다.

element.addEventListener('transitionend', (e) => {
  if (e.propertyName === 'opacity' && element.style.opacity === '0') {
    element.remove();
  }
});

요소 변환

transform 속성은 GPU 가속을 사용하므로 전환에 적합합니다. 일반적인 변환에는 translate(), scale(), rotate(), skew()가 있습니다. transform과 opacity를 애니메이션으로 처리하면 컴포지팅만 실행되므로 가장 빠른 경로를 사용할 수 있습니다.

.card {
  transform: translateY(0) scale(1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}

전환할 수 있는 속성은 무엇인가요?

숫자 값이 있는 속성이라면 무엇이든 전환할 수 있습니다: opacity, 색상, transform, 너비, 높이, padding, border, font-size. display와 visibility 같은 속성은 매끄럽게 전환되지 않으므로 대신 opacity를 사용해 페이드 인/아웃을 구현합니다.

실습: 모달 페이드 인

모달이 약간 작은 크기에서 시작해 페이드 인되면서 확대됩니다. JavaScript로 .open 클래스를 적용하고 CSS가 애니메이션을 처리하도록 합니다.

.modal {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.modal.open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

성능: transform과 opacity 사용하기

레이아웃을 유발하는 속성(width, height, margin, top, left)을 애니메이션으로 처리하면 비용이 많이 듭니다. 브라우저가 모든 프레임마다 레이아웃을 다시 계산하기 때문입니다. 매끄러운 60fps 애니메이션을 위해 transform과 opacity를 사용하시기 바랍니다.

빠른 확인

최상의 성능을 위해 어떤 CSS 속성을 우선적으로 애니메이션으로 처리해야 하나요?

복습: CSS 전환

transition: 속성 지속 시간 타이밍 지연. 'all'이 아니라 특정 속성을 애니메이션으로 처리합니다. 자연스러운 움직임에는 ease, ease-out, ease-in-out을 사용합니다. 작업을 연결하려면 transitionend를 감지합니다. 성능을 위해 transform과 opacity를 사용합니다. JS에서 클래스를 전환해 전환을 시작합니다.

자주 묻는 질문

“트랜지션: 속성, 지속 시간, 타이밍” 강의는 무료인가요?

네 — “트랜지션: 속성, 지속 시간, 타이밍” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“트랜지션: 속성, 지속 시간, 타이밍”에서 뭘 배우나요?

트랜지션을 추가해 CSS 속성 변경을 부드럽게 애니메이션하고, 적절한 지속 시간을 선택하며, ease-in-out 같은 이징 함수를 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“트랜지션: 속성, 지속 시간, 타이밍” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. CSS 사용자 지정 속성: 선언과 업데이트
  2. 트랜지션: 속성, 지속 시간, 타이밍
  3. @keyframes 애니메이션
  4. prefers-reduced-motion 존중하기
← Frontend Academy(으)로 돌아가기