[CSS - transition] #2. transition 속성

오늘은 transition의 속성에 대해 자세히 알아보는 시간을 가져보자 :)

1. transition 속성 종류

Property	설명
transition-property	transition의 대상
transition-duration	transition의 지속 시간
transition-delay	속성이 변한 시점(ex.hover)과 transition이 일어나는 시간 사이의 간격
transition-timing-function	transition의 시간당 속도
transition	위의 4개 속성을 단축하여 사용

2. transition 속성 자세히 알아보기

# transition-property

<속성값>

Value	설명
none	어느 속성도 transition 효과를 갖지 않음
all (default)	모든 속성이 transition 효과를 가짐
property	지정한 속성만 transition 효과를 가짐

<문법>

transition-property: [속성값];  // 문법
transition-property: width;  // 예

# transition-duration

<문법>

transition-duration: [시간];  // 문법
transition-duration: 2s;  // 예

# transition-delay

<문법>

transition-delay: [시간];  // 문법
transition-delay: 2s;  // 예

# transition-timing-function

<속성값>

Value	설명
linear	처음부터 마지막까지 일정하게 같은 속도 (등속)
ease (default)	처음부터 중간까지는 속도가 빨라지다가 중간에서 마지막은 속도가 느려짐 (느림 -> 빠름 -> 느림)
ease-in	처음에는 속도가 느리지만 끝으로 갈수록 속도가 빨라짐 (느림 -> 보통)
ease-out	처음에는 속도가 빠르지만 끝으로 갈수록 속도가 느려짐 (보통 -> 느림)
ease-in-out	처음에는 속도가 느리지만 점점 빨라지다가 끝으로 갈수록 다시 속도가 느려짐 (느림 -> 보통 -> 느림)
cubic-bezier(n,n,n,n)	베지어 곡선을 사용하여 사용자가 정의한 속도

<문법>

transition-timing-function: [속성값];  // 문법
transition-timing-function: linear;  // 예

# transition

<문법>

transition: <property> <duration> <timing-function> <delay>;  // 문법
transition: backgroung-color 2s linear 2s;  // 예
transition: backgroung-color 2s;  // timing-function과 delay는 생략 가능

다른 속성들은 다 이해가 가는데 transition-timing-function은 직관적으로 이해하기가 어려웠다. 그래서 직접 실습해 보기로 했다!

3. transition-timing-function 실습

위와 같이 div를 만들어주고 css도 적용해주었다.

transition의 속도 차이를 잘 보기 위해 transform의 rotate를 transition 대상으로 삼았다!

차례대로 linear 자리에 transition-timing-function의 속성값들을 넣어보자!

# linear

박스가 돌아가는 걸 보면 처음부터 끝까지 linear 하게 즉, 선형적(일정한 속도)으로 돌아가는 걸 볼 수 있다.

# ease

Default 값인 ease는 처음부터 중간까지는 점점 박스가 돌아가는 게 빨라지다가 중간에서 마지막까지는 느리게 박스가 돌아가는 걸 볼 수 있다.

아래의 ease-in ease-out ease-in-out 결과들을 보면 알겠지만 확실히 ease의 최고속도가 가장 빠른 걸 알 수 있다.

# ease-in

ease-in은 박스 돌아가는 속도가 갈수록 빨라지는 걸 볼 수 있다.

# ease-out

ease-out은 박스 돌아가는 속도가 갈수록 느려지는 걸 볼 수 있다.

# ease-in-out

ease-in-out은 처음에는 속도가 느리지만 점점 빨라지다가 끝으로 갈수록 다시 속도가 느려는 걸 볼 수 있다.

4. 느낀점

transition에 대해 공부 해보니 이를 사용해 각 애니메이션들을 좀 더 동적으로 만들어 보다 다채로운 페이지들을 만들고 싶다는 생각이 들었다. '왜 내가 만든 페이지들은 뭔가 예쁘지가 않지?' 라는 생각이 든 이유를 알게 된 하루였다.

또, 찾다보니 한꺼번에 여러 개의 transition을 사용할 수 있는 것 같았는데 다음 번에는 이에 대해 내가 만들고 싶은 레퍼런스를 찾아 직접 실습해보는 시간을 가지고 싶다 :)