[CSS] Transition, Transform

Transition

속성값의 변화 중간과정을 CSS가 만들어 부드러운 움직임을 나타내는 기능(IE 10+)으로 속성값이 변화하는 경우에만 동작한다.

 

function

 

• css 속성명 : 모든속성인 경우 all, width, left, opacity, ..
• 변화시간 : transition이 지속되는 시간
• 변화타입 : transition의 속도 곡선 지정. ease, ease-out, ease-in-out, linear, ease-in..
• 딜레이 시간 : transition을 시작하기 전에 기다려야 하는 시간
• transform 속성은 transform 하나로 모두 반영

 

Transform

CSS Transform 은 부모 element의 영향을 받지 않고, 독자적으로 element 의 위치 및 확대/축소 회전이 가능한 CSS 요소이다.

Transform 3D의 요소로 지정되면 브라우져에서 GPU를 사용하며, CSS 애니메이션 효과인 transition 과 animation 을 사용할때 성능과 자연스러움을 기대 할 수 있다.

 

 

function

 

 

 

 

 

* 출처 : https://velog.io/@chading/CSS-Transition-%ED%99%9C%EC%9A%A9-TIP-%EB%B6%80%EB%93%9C%EB%9F%AC%EC%9A%B4-%EC%9B%80%EC%A7%81%EC%9E%84 , https://velog.io/@chading/Transform-2D-3D