오늘은
Transition에 관련된 클래스를 알아보자 :)
1. Transition Property
Transition Property에 관한 클래스들을 정리해보자
혹시 Transition 기본에 대해 잘 모르면 해당 포스팅을 이해하기 힘드니 Transition 포스팅을 미리 보면 도움이 될 것 같다 👍
① 클래스명
| 클래스명 | 내용 |
|---|---|
transition-none | • transition-property: none |
transition-all | • transition-property: all • transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) • transition-duration: 150ms |
transition | • transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter • transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) • transition-duration: 150ms |
transition-colors | • transition-property: color, background-color, border-color, text-decoration-color, fill, stroke • transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) • transition-duration: 150ms |
transition-opacity | • transition-property: opacity • transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) • transition-duration: 150ms |
transition-shadow | • transition-property: box-shadow • transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) • transition-duration: 150ms |
transition-transform | • transition-property: transform • transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) • transition-duration: 150ms |
위 표를 보면 알 수 있듯이 적용할
Transition의 종류를 지정하는 것이다
Transition-Timing-Function과Transition-Duration도 나와있지만 모든 클래스에서 동일하므로Transition-Property를 지정한다고 봐도 무방하다
② BreakPoint (반응형) / Hover, Focus 적용
Transition Property를 반응형 디자인과 Hover, Focus에 적용해보자
| 종류 | 문법 | 예 |
|---|---|---|
BreakPoint | <적용할 BreakPoint>:<클래스명> | md:transition-all |
State | <적용할 State>:<클래스명> | hover:transition-all |
위 표처럼 클래스명 앞에
BreakPoint/State+:만 붙여주면 된다 👍
③ Value Customizing
Transition Property에 사용되는Value를 커스텀하는 법엔 두가지가 있다
ⓐ tailwind.config.js 파일에 커스텀 값 저장하기
이 방법은 아래 순서대로 따라하면 된다
- 순서
㉠ tailwind.config.js 파일 찾기 
㉡ theme.extend 내부에 transitionProperty 만들어 주기
㉢ theme.extend.transitionProperty에 내가 원하는 값 설정
: "value name" : "value"
transition-height라는 클래스명으로 사용할 수 있게 된다 👍
해당 방법은tailwind.config.js파일 내에 저장한 값이면 어느 곳에서든 전역적으로 사용 가능하다
ⓑ 인라인 내에서 커스텀 값 적용하기
두번째 방법은 첫번째 방법과 달리 전역적으로 사용할 필요 없는 값들을 커스터마이징 할 수 있는 방법으로
[] 대괄호를 이용한다
- 문법
:transition-[주고자하는 transition 속성]
- 코드
- 결과
2. Transition Duration
다음은
Transition Duration클래스를 알아보자
① 클래스명
| 클래스명 | 내용 |
|---|---|
duration-0 | • transition-duration: 0s |
duration-75 | • transition-duration: 75ms |
duration-100 | • transition-duration: 100ms |
duration-150 | • transition-duration: 150ms |
duration-200 | • transition-duration: 200ms |
duration-300 | • transition-duration: 300ms |
duration-500 | • transition-duration: 500ms |
duration-700 | • transition-duration: 700ms |
duration-1000 | • transition-duration: 1000ms |
② 예
Transition Duration은 직접 예로 보는 게 이해가 빠르니 아래를 보자
-
duration-150
-
duration-700
위의
duration-150과duration-700을 보면duration-700의transition지속시간이 훨씬 긴 걸 알 수 있다!
③ BreakPoint (반응형) / Hover, Focus 적용
Transition Duration을 반응형 디자인과 Hover, Focus에 적용해보자
| 종류 | 문법 | 예 |
|---|---|---|
BreakPoint | <적용할 BreakPoint>:<클래스명> | md:duration-100 |
State | <적용할 State>:<클래스명> | hover:duration-100 |
위 표처럼 클래스명 앞에
BreakPoint/State+:만 붙여주면 된다 👍
④ Value Customizing
Transition Duration에 사용되는Value를 커스텀하는 법엔 두가지가 있다
ⓐ tailwind.config.js 파일에 커스텀 값 저장하기
이 방법은 아래 순서대로 따라하면 된다
- 순서
㉠ tailwind.config.js 파일 찾기
㉡ theme.extend 내부에 transitionDuration 만들어 주기
㉢ theme.extend.transitionDuration에 내가 원하는 값 설정
: "value name" : "value"
이제 아래 코드처럼
duration-2000라는 클래스명으로 사용할 수 있게 된다 👍
-
코드
-
결과
해당 방법은
tailwind.config.js파일 내에 저장한 값이면 어느 곳에서든 전역적으로 사용 가능하다
ⓑ 인라인 내에서 커스텀 값 적용하기
두번째 방법은 첫번째 방법과 달리 전역적으로 사용할 필요 없는 값들을 커스터마이징 할 수 있는 방법으로
[] 대괄호를 이용한다
- 문법
:duration-[주고자하는 duration 값]
-
코드
-
결과
해당 방법은 단위도 꼭 같이 기재해 주어야 한다는 점 명심하자 😎
3. Transition Timing Function
Transition Timing Function은 아래의 4개 클래스만 존재한다
① 클래스명
| 클래스명 | 내용 |
|---|---|
ease-linear | • transition-timing-function: linear : 처음부터 마지막까지 일정하게 같은 속도 (등속) |
ease-in | • transition-timing-function: cubic-bezier(0.4, 0, 1, 1) : 처음에는 속도가 느리지만 끝으로 갈수록 속도가 빨라짐 (느림 -> 보통) |
ease-out | • transition-timing-function: cubic-bezier(0, 0, 0.2, 1) : 처음에는 속도가 빠르지만 끝으로 갈수록 속도가 느려짐 (보통 -> 느림) |
ease-in-out | • transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) : 처음엔 속도가 느리지만 빨라지다가 갈수록 다시 느려짐 (느림 -> 보통 -> 느림) |
② BreakPoint (반응형) / Hover, Focus 적용
Transition Timing Function를 반응형 디자인과 Hover, Focus에 적용해보자
| 종류 | 문법 | 예 |
|---|---|---|
BreakPoint | <적용할 BreakPoint>:<클래스명> | md:ease-in |
State | <적용할 State>:<클래스명> | hover:ease-in |
위 표처럼 클래스명 앞에
BreakPoint/State+:만 붙여주면 된다 👍
③ Value Customizing
Transition Timing Function에 사용되는Value를 커스텀하는 법엔 조금 복잡하지만 두가지가 있다
ⓐ tailwind.config.js 파일에 커스텀 값 저장하기
이 방법은 아래 순서대로 따라하면 된다
- 순서
㉠ tailwind.config.js 파일 찾기
㉡ theme.extend 내부에 transitionTimingFunction 만들어 주기
㉢ theme.extend.transitionTimingFunction에 내가 원하는 값 설정
: "value name" : "value"
ease-in-expo라는 클래스명으로 사용할 수 있게 된다 👍
해당 방법은tailwind.config.js파일 내에 저장한 값이면 어느 곳에서든 전역적으로 사용 가능하다
ⓑ 인라인 내에서 커스텀 값 적용하기
두번째 방법은 첫번째 방법과 달리 전역적으로 사용할 필요 없는 값들을 커스터마이징 할 수 있는 방법으로
[] 대괄호를 이용한다
- 문법
:ease-[주고자하는 Time Function 값]
- 코드
4. Transition Delay
① 클래스명
아래 클래스들은 말 그대로
Transition을 할 때 얼마나Delay를 줄 건지를 정하는 것이다
| 클래스명 | 내용 |
|---|---|
delay-0 | • transition-delay: 0s |
delay-75 | • transition-delay: 75ms |
delay-100 | • transition-delay: 100ms |
delay-150 | • transition-delay: 150ms |
delay-200 | • transition-delay: 200ms |
delay-300 | • transition-delay: 300ms |
delay-500 | • transition-delay: 500ms |
delay-700 | • transition-delay: 700ms |
delay-1000 | • transition-delay: 1000ms |
② 예
-
delay-150
-
delay-700
위의 두 Gif를 보면
delay-150,delay-700의 현저한 차이를 볼 수 있다!
③ BreakPoint (반응형) / Hover, Focus 적용
Transition Delay를 반응형 디자인과 Hover, Focus에 적용해보자
| 종류 | 문법 | 예 |
|---|---|---|
BreakPoint | <적용할 BreakPoint>:<클래스명> | md:delay-300 |
State | <적용할 State>:<클래스명> | hover:delay-300 |
위 표처럼 클래스명 앞에
BreakPoint/State+:만 붙여주면 된다 👍
④ Value Customizing
Transition Delay에 사용되는Value를 커스텀하는 법엔 두가지가 있다
ⓐ tailwind.config.js 파일에 커스텀 값 저장하기
이 방법은 아래 순서대로 따라하면 된다
- 순서
㉠ tailwind.config.js 파일 찾기
㉡ theme.extend 내부에 transitionDelay 만들어 주기
㉢ theme.extend.transitionDelay에 내가 원하는 값 설정
: "value name" : "value"
delay-2000이라는 클래스명으로 사용할 수 있게 된다 👍
해당 방법은tailwind.config.js파일 내에 저장한 값이면 어느 곳에서든 전역적으로 사용 가능하다
ⓑ 인라인 내에서 커스텀 값 적용하기
두번째 방법은 첫번째 방법과 달리 전역적으로 사용할 필요 없는 값들을 커스터마이징 할 수 있는 방법으로
[] 대괄호를 이용한다
- 문법
:delay-[주고자하는 Transition Delay 값]
-
코드
-
결과
Delay가 잘 적용됨을 볼 수 있다
5. 느낀점
예전에 CSS로 처음 Transition을 실습해 볼 때는 Transition이라는 개념 자체가 처음이라 각각의 개념을 잡아 이해하는 데 시간이 조금 걸렸었다. 특히 Transition Timing Function 속성들의 차이를 알아내는 데 많은 시간을 투자했었다.
그렇지만 오늘은 아는 개념이 된 Transition을 Tailwind CSS로 다시 한 번 포스팅하니 실습도 잘 되고 좋았다. 또 잠시 기억이 안 나던 개념들은 예전 나의 포스팅을 다시 보며 머리에 다시 새기는 좋은 경험도 되었다.
요즘은 Transition을 이용하지 않은 정적인 디자인보다는 Transition을 이용한 동적인 디자인이 많이 추구되는 만큼 많이 쓰게 될 개념이라 오늘 한 번 더 복습할 수 있어 좋았다 👍
