[CSS] 변형 전환 애니메이션

1. 변형(transform)

변형기준 좌표계를 기준으로 박스의 모양을 변형한다.

변형기준 좌표계의 원점은 박스 중심이며, x축은 오른쪽, y축은 아래쪽, z축은 앞쪽이 각각 양(+)의 방향이다.

 

아래와 같이 transform의 속성값에 변형함수를 사용한다.

.object { transform: translate(10px, 20px); }

변형함수 리스트는 아래와 같다.

translate	이동
rotate	회전
scale	확대/축소
skew	왜곡
matrix3d	3차원 이동/회전
perspective	깊이값

 

변형과 관련된 추가적인 속성 리스트

transform-origin	좌표계 원점 수정
perspective	원근감
transform-style	하위요소 적용여부
backface-visibility	뒷면 표현여부

 

2. 전환(transition)

변형을 포함한 다양한 Style 속성을 부드럽게 전환시켜준다. 전환 관련 속성 리스트는 아래와 같다.

transition-property	대상 Style 속성
transition-duration	진행시간
transition-timing-function	속도패턴
transition-delay	시작지연시간

 

3. 애니메이션(Animation)

애니메이션을 위해서 애니메이션의 시작, 중간, 끝 스타일을 정의하는 키프레임을 정의해야 한다.

@keyframes bchange {
	from { background-color: red; }
	to { background-color: yellow; }
}

 

애니메이션 관련 속성 리스트는 아래와 같다.

animation-name	적용할 애니메이션(키프레임) 이름
animation-duration	실행시간
animation-direction	실행완료 후 진행방향
animation-iteration-count	반복횟수
animation-timing-function	속도패턴