SOITZ

CSS Transition 한 줄로 사용하기

Published on

CSS Transition은 HTML 요소의 상태 변화를 시간에 따라 부드럽게 만들어 줍니다. 예를 들어, 버튼 위에 마우스를 올렸을 때 색상이 서서히 변경되게 하는 효과 등이 여기에 해당합니다. Transition을 사용하면 이러한 변화가 순간적으로 일어나지 않고, 지정된 시간 동안 점진적으로 일어나게 할 수 있습니다.

1. Transition 속성 순서

transition: [transition-property] [transition-duration]
  [transition-timing-function] [transition-delay];

  1. transition-property: 애니메이션을 적용할 속성의 이름입니다. 예를 들어 opacity, background-color 등이 있습니다. all을 사용하면 모든 속성에 대해 애니메이션을 적용합니다.

  2. transition-duration: 애니메이션의 지속 시간을 설정합니다. 보통 초(s) 또는 밀리초(ms) 단위로 설정합니다.

  3. transition-timing-function: 애니메이션의 타이밍 함수를 설정합니다. 애니메이션의 중간 속도를 결정합니다. 예를 들어 linear, ease, ease-in, ease-out, ease-in-out 등이 있습니다.

  4. transition-delay: 애니메이션 시작 전의 지연 시간을 설정합니다. 이 역시 초(s) 또는 밀리초(ms) 단위로 설정합니다

2. Transition 작성 예시

단일 속성
.box {
  transition: background-color 0.5s ease-in 0.2s;
}

이 코드는 .box 클래스를 가진 요소의 background-color 속성에 0.5초 동안 ease-in 타이밍으로 0.2초 후에 시작하는 애니메이션을 적용합니다.

2개 속성
.box {
  transition:
    background-color 0.5s ease-in 0.2s,
    width 0.3s linear 0s;
}

여기서, background-color는 0.5초 동안 ease-in 타이밍으로 0.2초 지연 후 시작하고, width는 0.3초 동안 linear 타이밍으로 즉시 시작하는 애니메이션을 적용합니다.

모든 속성
.box {
  transition: all 0.4s ease-out 0.1s;
}

.box 클래스를 가진 요소의 모든 애니메이션 가능한 속성에 대해 0.4초 동안 ease-out 타이밍으로 0.1초 후에 시작하는 애니메이션을 적용합니다.

여러개의 속성
.box {
  transition:
    background-color 0.5s,
    width 0.3s linear 0.2s,
    height 0.2s ease-in-out;
}

이 예시에서는 background-color에 대해 0.5초 동안 기본 타이밍(ease)으로 즉시 시작, width는 0.3초 동안 linear 타이밍으로 0.2초 후 시작, 그리고 height는 0.2초 동안 ease-in-out 타이밍으로 즉시 시작하는 애니메이션을 설정합니다.

transition-timing-function의 속성 중 steps
.element {
  transition: background-color 1s steps(4, end);
}

.element 클래스를 가진 요소의 background-color 속성에 대해 1초 동안 4단계의 애니메이션을 적용합니다. 여기서 steps(4, end)는 애니메이션이 4개의 동일한 시간 간격으로 분할되어 각 단계가 진행됨을 의미합니다. end는 각 단계가 해당 간격의 끝에서 발생한다는 것을 나타냅니다.

.sprite-animation {
  transition: background-position 0.8s steps(10, start);
}

.sprite-animation 클래스를 가진 요소에 스프라이트 애니메이션을 적용합니다. background-position 속성은 0.8초 동안 10개의 단계로 나뉘어 애니메이션되며, start는 각 단계가 해당 간격의 시작에서 발생한다는 것을 나타냅니다. 이러한 설정은 특히 스프라이트 시트를 사용하는 애니메이션에서 유용하게 쓰입니다.

3. Transition 상세 설명

3-1. transition-property

애니메이션을 적용할 속성의 이름입니다. 예를 들어 transform, top, padding, margin, opacity, background-color 등이 있습니다. all을 사용하면 모든 속성에 대해 애니메이션을 적용합니다. 기본값은 all

  1. 개별 속성 이름: 예를 들어, opacity, width, height, background-color, transform 등과 같이 개별 CSS 속성의 이름을 직접 지정할 수 있습니다.
  2. all: 모든 속성에 대해 transition 효과를 적용합니다. 이는 특정 속성을 지정하지 않고 모든 애니메이션 가능한 속성에 대해 transition 효과를 적용하고 싶을 때 사용됩니다.
  3. none: 애니메이션 효과를 적용하지 않을 때 사용합니다.
  4. 여기서 중요한 것은 transition-property에 지정할 수 있는 값은 오직 애니메이션 가능한 CSS 속성들만 해당한다는 점입니다. 예를 들어, color, background-color, margin, padding, left, top, opacity, width, height, transform 등이 이에 해당합니다. 반면에, font-family나 display 같은 애니메이션 불가능한 속성들은 transition-property로 지정할 수 없습니다.

여러 속성을 적용하고 싶을 때

transition-property: opacity, background-color;

3-2. transition-duration

애니메이션의 지속 시간을 설정합니다. 보통 초(s) 또는 밀리초(ms) 단위로 설정합니다. 0.5s, 1s, 2.5s 기본값은 0s

transition-duration: 0s;
transition-duration: 0.5s;
transition-duration: 1s;
transition-duration: 2.5s;

3-3. transition-timing-function

애니메이션의 타이밍 함수를 설정합니다. 이는 애니메이션의 중간 속도를 결정합니다.

  • linear: 애니메이션의 속도가 처음부터 끝까지 일정합니다. 이는 애니메이션이 균등한 속도로 진행됨을 의미합니다.
  • ease: 애니메이션은 천천히 시작하여, 그 후 빨라지다가 다시 천천히 끝납니다. 이는 대부분의 자연스러운 움직임에 적합한 기본적인 타이밍 함수입니다.
  • ease-in: 애니메이션은 천천히 시작합니다. 처음에는 느리게 움직이다가 점점 속도가 붙습니다. 대상이 점진적으로 가속되는 모습을 표현할 때 유용합니다.
  • ease-out: 애니메이션은 빠르게 시작하여 천천히 끝납니다. 대상이 빠르게 움직이다가 점차 느려지는 모습을 표현할 때 적합합니다.
  • ease-in-out: 애니메이션은 천천히 시작하여 천천히 끝납니다. 이는 ease-in과 ease-out의 조합으로, 대상이 천천히 시작하여 가속된 후 다시 천천히 멈추는 모습을 보여줍니다.
  • cubic-bezier(n,n,n,n): 사용자 정의 타이밍 함수를 생성할 수 있습니다. 여기서 n은 베지어 곡선의 제어점을 나타내는 네 개의 값입니다. 이를 통해 매우 구체적인 애니메이션 속도 곡선을 만들 수 있습니다.
  • steps(n): n 단계로 나누어진 애니메이션을 만듭니다. 이는 특정 횟수의 단계로 애니메이션을 분할하여 각 단계가 동일한 시간 동안 유지되도록 합니다.
  • step-start: steps(1, start)와 동일합니다. 애니메이션은 즉시 첫 번째 상태로 이동합니다.
  • step-end: steps(1, end)와 동일합니다. 애니메이션은 마지막 단계에서 종료됩니다.
transition-timing-function: linear;
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier;
transition-timing-function: step-start;
transition-timing-function: step-end;
transition-timing-function: steps(10, end);

단계를 쪼개고 싶을 때는 steps 사용

// 애니메이션이 4개의 동일한 시간 간격으로 분할되어 각 단계가 진행됨을 의미합니다.
// `end`는 각 단계가 해당 간격의 끝에서 발생한다는 것을 나타냅니다.
transition-timing-function: steps(4, end);

transition-timing-function: steps(4, end);

3-4. transition-delay

애니메이션 시작 전의 지연 시간을 설정합니다. 이 역시 초(s) 또는 밀리초(ms) 단위로 설정합니다.

transition-delay: 0s;
transition-delay: 0.5s;
transition-delay: 1s;
transition-delay: 2.5s;