화면전환

CSS 팟캐스트 - 044: 전환

웹사이트와 상호작용할 때 많은 요소에 state가 있음을 알 수 있습니다. 예를 들어 드롭다운은 열린 상태 또는 닫힌 상태일 수 있습니다. 포커스를 두거나 마우스를 가져가면 버튼의 색상이 변경될 수 있습니다. 모달이 표시되고 사라집니다.

기본적으로 CSS는 이러한 상태의 스타일을 즉시 전환합니다.

CSS 전환을 사용하면 요소의 초기 상태와 타겟 상태 사이에 보간할 수 있습니다. 두 환경 간의 전환은 상호작용의 원인과 결과에 대한 시각적 방향, 지원, 힌트를 제공하여 사용자 경험을 향상시킵니다.

전환 속성

CSS에서 전환을 사용하려면 다양한 전환 속성이나 transition 약식 속성을 사용하면 됩니다.

전환 속성

transition-property 속성은 전환할 스타일을 지정합니다.

.my-element {
  transition-property: background-color;
}

transition-property는 쉼표로 구분된 목록으로 하나 이상의 CSS 속성 이름을 허용합니다.

원하는 경우 transition-property: all를 사용하여 모든 속성이 전환되어야 함을 나타낼 수 있습니다.

전환 기간

transition-duration 속성은 전환을 완료하는 데 걸리는 시간을 정의하는 데 사용됩니다.

transition-duration는 초 (s) 또는 밀리초 (ms) 단위의 시간 단위를 허용하고 기본값은 0s입니다.

전환 시간 함수

transition-timing-function 속성을 사용하여 transition-duration 동안 CSS 전환 속도를 변경합니다.

기본적으로 CSS는 요소를 일정한 속도 (transition-timing-function: linear)로 전환합니다. 그러나 선형 전환은 다소 인위적인 것처럼 보일 수 있습니다. 실제 객체에서는 가중치가 있어서 즉시 중지하고 시작할 수 없습니다. 전환에 들어가거나 나올 때까지 이징을 사용하면 더 생동감 있고 자연스럽게 전환할 수 있습니다.

CSS 애니메이션 모듈에 타이밍 함수에 관한 개요가 나와 있습니다.

DevTools를 사용하여 다양한 타이밍 함수를 실시간으로 실험할 수 있습니다.

전환-지연

transition-delay 속성을 사용하여 전환이 시작되는 시간을 지정합니다. transition-duration를 지정하지 않으면 기본값이 0s이므로 전환이 즉시 시작됩니다. 이 속성은 시간 단위를 허용합니다(예: 초(s) 또는 밀리초(ms)).

이 속성은 그룹의 각 후속 요소에 더 긴 transition-delay를 설정하여 지그재그로 전환할 때 유용합니다.

transition-delay는 디버깅에도 유용합니다. 지연을 음수 값으로 설정하면 타임라인으로의 전환이 시작될 수 있습니다.

약식: 전환

대부분의 CSS 속성과 마찬가지로 약식 버전이 있습니다. transition는 transition-property, transition-duration, transition-timing-function, transition-delay를 결합합니다.

.longhand {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

.shorthand {
  transition: transform 300ms ease-in-out 0s;
}

전환할 수 있는 것과 불가능한 것은 무엇인가요?

CSS를 작성할 때 애니메이션 전환을 포함해야 하는 속성을 지정할 수 있습니다. 애니메이션 가능한 CSS 속성의 MDN 목록을 참고하세요.

일반적으로 시작 상태와 최종 상태 사이에 '중간 상태'가 있을 수 있는 요소만 전환할 수 있습니다. 예를 들어, serif과 monospace 사이의 '중간 상태'가 어떤 모양인지 불분명하기 때문에 font-family의 전환을 추가할 수 없습니다. 반면 font-size의 단위가 보간될 수 있는 길이이므로 전환을 추가할 수 있습니다.

전환할 수 있는 일반적인 속성은 다음과 같습니다.

변환

transform CSS 속성은 GPU 가속 속성이기 때문에 애니메이션이 더 원활해져 배터리도 적게 소모되기 때문에 일반적으로 전환됩니다. 이 속성을 사용하여 요소를 임의로 조정, 회전, 변환 또는 왜곡할 수 있습니다.

함수 모듈에서 변환 섹션을 확인하세요.

색상

상호작용 전후와 도중에 색상은 상태를 나타내는 훌륭한 지표가 될 수 있습니다. 예를 들어 버튼에 마우스를 가져가면 색상이 변경될 수 있습니다. 이러한 색상을 변경하면 사용자에게 버튼을 클릭할 수 있다는 피드백을 제공할 수 있습니다.

color, background-color, border-color 속성은 상호작용 시 색상을 전환할 수 있는 몇 가지 위치일 뿐입니다.

색상에 관한 모듈을 확인하세요.

그림자

그림자는 사용자 포커스에서처럼 고도 변화를 나타내기 위해 전환되기도 합니다.

그림자에 관한 모듈을 확인하세요.

필터

filter는 즉시 그래픽 효과를 추가할 수 있는 강력한 CSS 속성입니다. 다양한 filter 상태 간에 전환하면 상당히 인상적인 결과를 얻을 수 있습니다.

필터에 관한 모듈을 확인하세요.

전환 트리거

CSS 전환이 활성화되려면 상태 변경 및 상태 변경을 트리거하는 이벤트를 포함해야 합니다. 이러한 트리거의 일반적인 예로는 :hover 의사 클래스가 있습니다. 이 유사 클래스는 사용자가 커서로 요소 위로 마우스를 가져가면 일치합니다.

다음은 요소의 상태 변경을 트리거할 수 있는 몇 가지 의사 클래스 및 이벤트의 목록입니다.

• :hover: 커서가 요소 위에 있으면 일치하는 항목을 찾습니다.
• :focus: 요소에 포커스가 있으면 일치하는 항목을 찾습니다.
• :focus-within : 요소 또는 그 하위 요소에 포커스가 맞춰지면 매칭합니다.
• :target: 현재 URL의 프래그먼트가 요소의 ID와 일치하는 경우 일치합니다.
• :active: 요소가 활성화될 때 (일반적으로 마우스를 위로 누를 때) 일치시킵니다.
• JavaScript에서 class 변경: 요소의 CSS class가 JavaScript를 통해 변경되면 CSS는 변경된 사용 가능한 속성을 전환합니다.

들어가기 또는 나가기를 위한 다른 전환

마우스 오버/포커스에서 다양한 transition 속성을 설정하여 흥미로운 효과를 만들 수 있습니다.

.my-element {
  background: red;

  /* This transition is applied on the "exit" transition */
  transition: background 2000ms ease-in;
}

.my-element:hover {
  background: blue;

  /* This transition is applied on the "enter" transition */
  transition: background 150ms ease;
}

접근성 고려사항

CSS 전환은 모든 사람에게 적합한 것은 아닙니다. 일부 사용자의 경우 전환 및 애니메이션으로 인해 멀미나 불편함을 유발할 수 있습니다. 다행히 CSS에는 사용자가 기기에서 움직임이 적은 것을 선호했는지 감지하는 prefers-reduced-motion라는 미디어 기능이 있습니다.

/*
  If the user has expressed their preference for
  reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
  .my-element {
    transition: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
  .my-element {
    transition: transform 250ms ease;
  }
}

이 미디어 기능에 대한 자세한 내용은 prefers-reduced-motion: 때로는 더 적은 움직임이 더 효과적이라는 블로그 게시물을 확인하세요.

성능에 대한 고려사항

CSS 전환 작업을 할 때 특정 CSS 속성에 전환을 추가하면 성능 문제가 발생할 수 있습니다. 예를 들어 width 또는 height 같은 속성이 변경되면 페이지의 나머지 부분에 콘텐츠를 푸시합니다. 이렇게 하면 CSS는 전환의 각 프레임에서 영향을 받는 모든 요소의 새 위치를 계산합니다. 가능하면 transform 및 opacity와 같은 속성을 대신 사용하는 것이 좋습니다.

이 주제에 관해 자세히 알아보려면 고성능 CSS 애니메이션 가이드를 확인하세요.

학습 내용 확인하기

전환에 관한 지식 테스트