[정리] 5 | 변형함수, 트랜지션과 애니메이션 속성 정리

[정리] 5 | 변형함수, 트랜지션과 애니메이션 속성 정리

변형함수

종류	설명
transform : translate(tx, ty)	지정한 크기만큼 x축과 y축으로 이동
transform : translate(tx, ty, tz)	지정한 크기만큼 x축, y축, z축으로 이동
transform : translateX(tx)	지정한 크기만큼 x축으로 이동
transform : translateY(ty)	지정한 크기만큼 y축으로 이동
transform : translateZ(tz)	지정한 크기만큼 z축으로 이동
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축으로 확대, 축소
transform : rotate(각도)	지정한 각도만큼 회전
transform : rotateX(각도)	x축을 기준으로 지정한 각도만큼 회전
transform : rotateY(각도)	y축을 기준으로 지정한 각도만큼 회전
transform : rotateZ(각도)	z축을 기준으로 지정한 각도만큼 회전
transform : rotate3d(rx, ry, rz, 각도)	x축, y축, y축을 기준으로 지정한 각도만큼 회전
transform : skew(ax, ay)	지정한 각도만큼 x축과 y축으로 왜곡
transform : skewX(ax)	지정한 각도만큼 x축으로 왜곡
transform : skewY(ay)	지정한 각도만큼 y축으로 왜곡

트랜지션 속성

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

애니메이션 속성

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

 

 

 

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)