[CSS] transition에 대해 알아봅시다

transition은 요소의 상태 변화에 따라 부드러운 애니메이션 효과를 제공하는 CSS 속성입니다.
animation과 달리, transition은 요소의 상태 변경(예: hover, focus, active 등)에 반응하여 특정 방향으로만 애니메이션을 적용할 수 있다는 특징이 있습니다.

---

실 사용법:

바쁘신 분들은 아래 코드팬 코드를 우선적으로 보셔도 됩니다.

See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen.

hover 이벤트에 transition을 주고 싶을 경우 주체가 되는 요소에 transitinon을 주어야 합니다.

여기서 만약 hover에 transition을 주면 hover을 했을 때 애니메이션이 있지만 마우스 이탈 시 서서히 속성이 변경되는 것이 아닌 순식간에 변경됩니다.

---

transition 속성 소개

transition-duration

전환 효과가 얼마나 오래 지속될지 지정합니다.

• 시간 단위 (s 또는 ms).
• 기본값: 0s (전환 없음). 1s는 1초, .3s(콤마 앞의 0은 생략할 수 있습니다.)는 0.3초입니다.
• 예: 0.5s, 200ms.

 

transition-timing-function

전환 속도의 가속도 및 감속도를 설정합니다.

• ease (기본값): 느리게 시작 → 빠르게 → 느리게 종료.
• linear: 일정한 속도로 전환.
• ease-in: 느리게 시작 → 빠르게 종료.
• ease-out: 빠르게 시작 → 느리게 종료.
• ease-in-out: 느리게 시작 → 빠르게 → 느리게 종료.
• cubic-bezier(n, n, n, n): 사용자 정의 속도 곡선.
• step-start / step-end: 즉각적인 변화.
• steps(n, <start | end>): 단계를 나눠 점진적 변화.
• easing을 좀 더 세세하게 설정해주고 싶으실 경우 아래 사이트에서 다양한 이징을 체험해 볼 수 있습니다.
  https://easings.net/ko 사이트에서 맘에 드는 easing을 선택한 다음 CSS 설정을 복사해 올 수 있습니다.

 

transition-delay

전환이 시작되기 전 대기 시간을 지정합니다.

• 시간 단위 (s 또는 ms).
• 기본값: 0s (지연 없음). 1s는 1초, .3s(콤마 앞의 0은 생략할 수 있습니다.)는 0.3초입니다.
• 예: 1s, 300ms.

 

transition 압축형

위처럼 각각 속성을 추가해도 되지만 transition 코드에 압축해서 사용해도 됩니다.

• transition: <property> <duration> <timing-function> <delay>;
• transition: background-color 0.3s ease-in-out 0.2s;

예: transition: left .2s ease-in-out 1s;