[포스코X코딩온] CSS_06 Transition/Transform/Animation

transition : 

요소의 값이 변할 때마다 전환되는 모션을 추가하는 속성이다. transition은 속성 자체로 스타일을 주는 속성이 아니라 가상 클래스 (ex. :hover) 나 자바스크립트의 부가적인 액션에 의해 사용된다.  

transition: 속성명 지속시간 타이밍함수 대기시간;

 

transition-property : 효과를 적용할 속성 이름 지정

all : 모든 속성에 지정
속성 이름 : 전환 효과할 속성 이름 지정
- 여러 개 지정할 시 쉼표(,) 로 구분
 

transition-duration : 전환 효과의 지속시간 지정

os : 전환효과x
시간 : s 지정
 

transitio-timing-function : 전환 효과의 타이밍 함수 지정

ease	느리게-빠르게-느리게	cubic-bezier(0.25, 0.1, 0.25, 1)
linear	일정하게	cubic-bezier(0, 0, 1, 1)
ease-in	느리게-빠르게	cubic-bezier(0.42, 0, 1, 1)
ease-out	빠르게-느리게	cubic-bezier(0, 0, 0.58, 1)
ease-in	느리게-빠르게-느리게	cubic-bezier(0.42, 0, 0.58, 1)

 

transition-delay : (몇 초뒤에 시작할지) 대기 시간

os : 전환효과x
시간 : s 지정
 

transform : 요소에 이동, 회전, 확대/축소 등의 효과를 준다. 

transform : 변환함수1 변환함수2 변환함수3 ... ;
transform : 원근법 이동 크기 회전 기울임;

 

2D 변환 함수

transform	설명
translate(x, y)	(x축, y축) 이동
translateX(x)	(x축) 이동
translateY(y)	(y축) 이동
scale(x, y)	(x, y) 만큼 크게
scaleX(x)	(x) 만큼 크게
scaleY(y)	(y) 만큼 크게
rotate(degree)	회전 각도
skew(x,y)	(x, y) 각도 기울임
skewX(x)	(x) 각도 기울임
skewY(y)	(y) 각도 기울임
matrix(n, n, n, n, n, n)	2차원 변환 효과

 

3D 변환 함수

transform	설명
perspective(n)	원근법(거리)
rotateX(x)	x축 회전
rotateY(y)	y축 회전
rotateZ(z)	z축 회전
rotate3d(x, y, z, a)	(x축, y축, z축, 각도) 회전
matrix3d(n, n, n, n, n, n)	3차우너 변환 효과
translateZ(z)	z축 이동
translate3d(x, y, z)	(x, y, z)축 이동
scale(z)	z축으로 z만큼 크게
scale3d(x, y, z)	(x, y, z) 만큼 크게

 

perspective : 원근 거리 지정(원근감)

 

backface-visibility : visible / hidden;

- 회전으로 뒤집어진 뒷면 보이게 / 안 보이게
 

animation

@keyframes

애니메이션 흐름 중에서 시점을 나눠서 조절할 수 있다. 키프레임을 변수에 선언하고 해당 변수를 불러와서 사용한다. 
- to /from
- 0%~100%
 

animation 속성

animation : name duration timing-function delay iteration-count direction

animation-name : @keyframes 애니메이션 이름 지정
animation-duration : 지속시간
animation-delay : 지연시간
animation-iteration-count : 반복횟수
animation-timing-function : 반복형태

animation-timing-function : ease;

animation-timing-function : ease-in;

animation-timing-function : ease-out;

animation-timing-function : ease-in-out;

animation-timing-function : linear;

animation-direction : 애니메이션 방향