transition: 100ms;으로

transition: 100ms;

이온디 161

transition: 100ms;
이 속성은 CSS에서 트랜지션(transition) 효과를 지정하는 것으로, 요소의 속성이 변경될 때 100ms(밀리초) 동안 부드럽게 변화하도록 설정하는 것이다.

기본 문법:

css
transition: [속성] [지속시간] [타이밍 함수] [지연시간];
  • 속성: 어떤 속성에 트랜지션을 적용할지 지정 (예: all, background-color, width 등)
  • 지속시간: 트랜지션이 지속되는 시간 (예: 100ms, 0.5s 등)
  • 타이밍 함수(선택): 속도 곡선 설정 (ease, linear, ease-in, ease-out 등)
  • 지연시간(선택): 트랜지션 시작까지의 대기 시간 (0s, 200ms 등)

transition: 100ms;의 의미:

  • 속성 생략: transition 속성의 첫 번째 값이 지속시간(100ms)이므로, 이 경우 기본적으로 all(모든 속성)에 적용됨.
  • 기본값적용:
    • 속성: all (모든 변경 가능한 속성)
    • 타이밍 함수: ease (느리게 시작해서 빠르게 진행, 다시 느려짐)
    • 지연시간: 0s (즉시 시작)

예제:

css
button {
  background-color: blue;
  color: white;
  transition: 100ms;
}

button:hover {
  background-color: red;
}
  • 버튼에 마우스를 올리면 100ms 동안 부드럽게 파란색 → 빨간색으로 변경됨.

🎯 결론:

transition: 100ms;는 모든 속성(all)에 대해 100ms 동안 부드럽게 변화하도록 설정하는 CSS 속성!

목록으로