CSS transition 기초

참조 : https://www.youtube.com/watch?v=Zp-n49r9TCA

 

<트랜지션 지속시간 transition-duration>

예를 들어 hover하면 색이 변하는 박스를 만든다면

기본 상태 element가 있고

css로 :hover 효과로 다른 색을 지정할 수 있다.

 

이때 두가지 선택지가 있다.

1. 직접적인 엘리먼트에 transition 넣기 -> hover할때 안할때 모두 자연스럽게 색이 변함

2. hover 이벤트에 transiton 넣기 -> 마우스를 올릴때만 자연스럽게 색이 변함, 뗄 때에는 바로 띡하고 색이 돌아옴

 

<트랜지션 지연 transition-delay>

마우스를 올리고 1초뒤에 transition이 일어난다.

 

마찬가지로

1. transition과 원상복구가 자연스러우려면 직접적 요소에 delay를 주어야함

2. 원상복구는 그냥 냉정하게 처리되려면 이벤트에 delay주기

 

<트랜지션 가속도 transition-timing-function>

-당장 활용할 것은 아니니 그래프를 조작하여 커스터마이징이 가능하다는 것 까지만 알아두자-