트렌지션 transition

transition은 css 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 만약 transition을 사용하지 않는다면, 속성의 변화가 곧 바로 일어납니다. 예를 들면, 글자 두께를 bolder로 하면 화면에 곧바로 글자가 두꺼워 질 것입니다. 하지만 transition을 사용하면 일정한 기간에 걸쳐 그 효과가 나타나도록 설정할 수 있습니다. 그렇게 함으로써, 좀 더 부드럽게 스타일을 전환시킬 수 있습니다. transition을 사용하기 위해서는 두 가지 지정 값을 정해줘야 합니다. 1.효과를 지정시킬 속성(움직임/크기/색상 등)과 시작시의 값(0%), 완료시의 값(100%) ->transition-property에 값 지정 2.변화하는데 걸리는 시간(1s / 0.5s 등) ->transition-duration에 값 지정 transition은 자동으로 발동되지 않습니다. 가상 클래스 선택자(Pseudo-Classes) 또는 javascript의 부수적인 액션에 의...

원문링크 : 트렌지션 transition