안녕하세요.
오늘은 CSS Transition에 대해 알아보겠습니다.
CSS Transition 은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 속성입니다.
CSS transitions는 여러분이 어떤 속성을 움직이게 할지, 언제 애니메이션이 시작할지,
트랜지션을 얼마나 지속할지, 그리고어떻게 트랜지션을 실행하는지 결정하게 합니다.
transition-property
트랜지션을 적용해야 하는 CSS 이름을 명시합니다.
쉼표(,)로 구분하여 여러개의 속성을 동시에 지정할 수 있습니다.
transition-duration
트랜지션이 일어나는 지속 시간을 명시합니다.
기본값은 0이기 때문에 이 값을 표시해 줘야 부드러운 변화를 볼 수 있습니다.
음수값을 지정하게 되면 0으로 인식됩니다.
div{
transition-property: width;
transition-duration: 2s;
}transition-timing-function
변화하는 동안에 중간 속도값을 정의합니다.
미리 정해져 있는 단어를 사용하거나 cubic-bezier 함수를 사용할 수 있습니다.
div{
transition-timing-function: linear;
}
transition-delay
속성을 시작하기 전에 시간을 정합니다. 기본값은 0입니다.
다음과 같이 단축 CSS 문법을 사용할 수 있습니다.
div {
transition: property duration timing-function delay;
}트랜지션 완료 감지하기
트랜지션을 완료하면 발생하는 단일 이벤트가 있습니다.
transitionEnd이며 webkit에서는 webkitTransitionEnd입니다.
el.addEventListener("transitionend", updateTransition, true);감사합니다.
