[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 50회차 미션

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 50일차입니다!

드디어 강의를 수강한 지 50일째네요! 동시에 17번째 커리큘럼 'CSS / 속성 - 전환 & 변환' 공부를 시작했습니다. 🐱‍🏍

transition(전환)과 transform(변환)의 사용법이 종종 헷갈렸는데 이참에 확실히 개념 잡아서 프로젝트에 좀 멋들어지게 활용하고 싶어요.

 

열공한 흔적 😎

transition

◾ CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값에 애니메이션 효과를 줌

◾ 속성 값 ⬇

 

값	의미	기본값
transition-property	전환 효과를 사용할 속성 이름	all
transition-duration	전환 효과의 지속 시간 설정	0s
transition-timing-function	타이밍 함수 지정	ease
transition-delay	전환 효과가 몇 초 뒤에 시작할 지 대기 시간 설정	0s

 

◽ 단위는 초[s] 뿐만 아니라 밀리초[ms]도 사용 가능함

◽ 단축 속성 사용법: transition: 속성1 지속시간1, 속성2 지속시간2 와 같이 씀

 

(JSFiddle)

 

transition-timing-function

◾ 타이밍 함수(애니메이션 전환 효과를 계산하는 방법) 지정

◾ 속성 값 ⬇

 

값	의미	Cubic Beizier 값
ease (기본값)	빠르게 ➡ 느리게	cubic-bezier(.25, .1, .25, 1)
linear	일정하게	cubic-bezier(0, 0, 1, 1)
ease-in	느리게 ➡ 빠르게	cubic-bezier(.42, 0, 1, 1)
ease-out	빠르게 ➡ 느리게	cubic-bezier(0, 0, .58, 1)
ease-in-out	느리게 ➡ 빠르게 ➡ 느리게	cubic-bezier(.42, 0, .58, 1)
cubic-bezier(n, n, n, n)	자신만의 값을 정의 (0~1)	.
steps(n)	n번 분할된 애니메이션	.

 

◽ 자료 참고: https://easings.net/

Easing Functions Cheat Sheet

◽ 사용법: transition: 2s ease-in ➡ 2s: transition-duration, ease-in: transition-timing-function

 

transform

◾ 요소의 변환 효과(변형)을 지정

 

◽ 사용법 (1) : transform: 변환함수1, 변환함수2, 변환함수3, ... ;

◽ 사용법 (2) : transform: 원근법 이동 크기 회전 기울임

 

◽ 예제: .box { transform: rotate(20deg) translate(10px, 0); }

➡ { translate(10px, 0) } 은 { position: relative; left: 10px; } 과 동일한 효과를 보이지만, position과 같이 애니메이션에 특화되지 않은 속성으로 렌더링할 시 최적화가 되지 않을 수 있음! ➡ 애니메이션 효과를 주고자할 때에는 transform의 변환함수 사용하기!

 

transform 2D 변환 함수

◾ 이동: translate / 회전: rotate / 크기: scale / 비틀기(기울임): skew

◾ 변환함수 종류 ⬇

 

값 (변환함수)	의미	단위
translate(x, y)	이동(X축, Y축)	단위
translate(x)	이동(X축)	단위
translate(y)	이동(Y축)	단위
scale(x, y)	크기(X축, Y축)	없음(배수)
scaleX(x)	크기(X축)	없음(배수)
scaleY(y)	크기(Y축)	없음(배수)
rotate(degree)	회전(각도)	deg
skew(x-deg, y-deg)	기울임(X축, Y축)	deg
skewX(x-deg)	기울임(X축)	deg
skewY(y-deg)	기울임(Y축)	deg
matrix(n, n, n, n, n, n)	2차원 변환 효과	없음

 

transform 3D 변환 함수

◾ 변환함수 종류 ⬇

 

값(변환함수)	의미	단위
translate3d(x, y, z)	이동(X축, Y축, Z축)	단위
translateZ(z)	이동(Z축)	단위
scale3d(x, y, z)	크기(X축, Y축, Z축)	없음(배수)
scaleZ(z)	크기(Z축)	없음(배수)
rotate3d(x, y, z, a)	회전(X벡터, Y벡터, Z벡터, 각도)	없음, deg
rotateX(x)	회전(X축)	deg
rotatey(Y)	회전(Y축)	deg
rotateZ(z)	회전(Z축)	deg
perspective(n)	원근법(거리)	단위
matrix(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)	3차원 변환 효과	없음

 

◾ translateZ(z), scaleZ(z)와 달리 rotate()의 개별 함수는 rotateX(x), rotateY(y) 도 3차원 변환 함수임

◽ perspective() 함수는 transform의 가장 앞 부분에 위치해야 함

◽ perspective() 함수의 인수 값이 작을 수록 원근감이 커짐 (사용자의 가까이에 있음)

 

(JSFiddle)

 

---

강의 링크: https://bit.ly/3m0t8GM