[CSS] transitions

- CSS transitions

• CSS 속성(properties)을 변경할 때 애니메이션 속도를 조절하는 방법을 제공
• 속성 변경은 즉시 영향을 미치는 대신, 일정 기간에 걸쳐 일어나도록 가능
• 초기 상태와 최종 상태 사이의 중간 상태는 자동적으로 계산된다.

 

CSS transitions 상태

 

• 애니메이션 시작 시기(지연 설정), 전환 지속 시간(기간설정), 전환 실행 방법 속성 지정 가능
  • transition-property
    • transition을 적용해야 하는 CSS 속성의 이름을 지정
    • 명시된 CSS 속성들만 애니메이션 발생
      
      
  • transition-duration
    • transition이 발생해야 하는 기간을 지정
    • 모든 속성에 동일한 기간을 지정하거나 각 속성에 다른 기간 지정 가능
      
      
  • transition-timing-function
    • 속성에 대한 중간 값이 계산되는 방법을 정의하는 함수를 지정
    • https://easings.net/
      
      
  • transition-delay
    • 속성이 변경되고 실제로 transition이 시작되는 시간 사이의 대기 시간을 정의
      
      

div {
    transition: <property> <duration> <timing-function> <delay>;
}

 

 

- transition JavaScript Event

• transitionend: transition 완료 감지
• transitionrun: transition 시작 감지(delay 전에 실행)
• transitionstart: transition 시작 감지(delay 후에 실행)

el.addEventListener("transitionend", updateTransition, true);
el.addEventListener("transitionrun", signalStart, true);
el.addEventListener("transitionstart", signalStart, true);

 

 

- transition을 사용하여 JavaScript 기능을 원활하게 만들기

See the Pen by msko89 (@msko89) on CodePen.

 

 

---

[ 참고자료 ]

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions