TIL6 - CSS Transition

Transition

속성을 서서히 변화시켜 부드러운 모션을 적용해주는 속성이다.

속성값

• transition-property : transition을 적용시킬 속성값을 정한다.
• transition-duration : transition 지속 시간을 정한다.
• transition-timing-function : 진행 속도를 정한다.
• transition-delay : transition을 언제 시작할지 결정한다.
• initial(기본값)
• inherit : 부모 요소의 속성값을 상속받는다.
• transition: property timing-function duration delay

trainsition 속성은 자동으로 발동되지 않는다는 것을 명심하자. 먼저 해당 요소에 추가할 CSS 스타일 transtion 효과를 설정하고, 추가할 전환 효과가 지속될 시간을 설정하는 것이 기본이다.

마우스 오버 시나 체크박스에 체크할 때 등 발동 조건이 맞을 때 transition 속성이 적용된다. 자동으로 효과가 발동되게 하고 싶다면 animation을 사용하도록 하자!

transition-timing-function

• linear : transition 효과가 처음부터 끝까지 일정한 속도로 진행됨.
• ease : 기본값, 효과가 천천히 진행되다가 빨라지고 끝에는 다시 느려짐.
• ease-in : 천천히 시작됨.
• ease-out : 천천히 끝남.
• ease-in-out : 천천히 시작되어 천천히 끝남.