[CSS] 트랜지션과 애니메이션

*변형 함수 

translate() 함수 : 요소 이동하기
translate: translate(tx, ty)	지정한 크기만큼 x축과 y축으로 이동합니다.
translate: translate(tx, ty, tz)	지정한 크기만큼 x축과 y축과 z축으로 이동합니다.
translate: translateX(tx)	지정한 크기만큼 x축으로 이동합니다.
translate: translateY(ty)	지정한 크기만큼 y축으로 이동합니다.
translate: translateZ(tz)	지정한 크기만큼 z축으로 이동합니다.
scale() 함수 : 요소 확대, 축소하기
transform: scale(sx, sy)	지정한 크기만큼 x축, y축으로 확대, 축소합니다.
transform: scale(sx, sy, sz)	지정한 크기만큼 x축, y축, z축으로 확대, 축소합니다.
transform: scaleX(sx)	지정한 크기만큼 x축으로 확대, 축소합니다.
transform: scaleY(sy)	지정한 크기만큼 y축으로 확대, 축소합니다.
transform: scaleZ(sz)	지정한 크기만큼 z축으로 확대, 축소합니다.
rotate() 함수 : 요소 회전하기
transform: rotate(각도)	지정한 각도만큼 회전합니다.
transform: rotateX(각도)	x축을 기준으로 지정한 각도만큼 회전합니다.
transform: rotateY(각도)	y축을 기준으로 지정한 각도만큼 회전합니다.
transform: rotateZ(각도)	z축을 기준으로 지정한 각도만큼 회전합니다.
transform: rotate3d(rx, ry, rz, 각도)	x축과 y축, z축을 기준으로 지정한 각도만큼 회전합니다.
skew() 함수 : 요소 비틀기
transform: skew(ax, ay)	지정한 각도만큼 x축과 y축으로 비틉니다.
transform: skewX(ax)	지정한 각도만큼 x축으로 비틉니다.
transform: skewY(ay)	지정한 각도만큼 y축으로 비틉니다.

 

*트랜지션 속성

종류	설명
transition-property	트랜지션 적용 대상을 지정합니다. 기본값은 all입니다.
transition-duration	트랜지션의 실행 시간을 지정합니다. 단위는 s(초)이고 기본값은 all입니다.
transition-timing-function	트랜지션의 실행 형태를 지정합니다.
transition-delay	트랜지션의 지연 시간을 지정합니다. 단위는 s(초)이고 기본값은 0입니다.
transition	transition-property, transition-duration, transition-timing-function, transition-delay 속성을 한꺼번에 지정합니다.

 

*애니메이션 속성

종류	설명
@keyframes	애니메이션이 바뀌는 지점을 설정합니다.
animation-delay	애니메이션의 시작 시간을 지정합니다.
animation-direction	애니메이션을 종료한 뒤 처음부터 시작할지, 반대 방향으로 진행할지 지정합니다.
animation-duration	애니메이션의 실행 시간을 지정합니다. 단위는 s(초)입니다.
animation-iteration-count	애니메이션의 반복 횟수를 지정합니다.
animation-name	@keyframes로 설정해 놓은 중간 상태를 지정합니다.
animation-timing-function	키프레임의 전환 형태를 지정합니다.
animation	animation 속성을 한꺼번에 묶어서 지정합니다.