[CSS] transition

css transition들은 시작 - 종료까지 특정 속성의 변화만 보여준다. 

이 루프(반복)을 시각화하기 위해서는 css animation을 참고

 

transition-property

css 속성 이름 명시

 

transition-duration

트랜지션이 일어나는 지속 시간 0.5s ~ 

 

trasition-timing-function

중간값을 계산하는 방법을 정의하는 함수 명시

cubic bezier의 4개 꼭짓점으로 정의

ease, linear, step-end, steps(4, end)

 

 

트랜지션을 완료 후에 발생하는 이벤트 감지하기 transitioned

propertyName

트랜지션이 완료된 속성의 이름을 나타내는 문자열

 

이벤트는 자바스크립트에서 element.addEventListener() 메소드로 모니터링

이름.addEventListener("transitioned", updateTransition, true);

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions