CSS 7번째 - 애니메이션

transform 속성 - 이미지 회전, 이동

 .transform : 변형함수;

 .2차원 변형 함수

변형 함수	설명
translate(tx,ty)	지정한 크기만큼 x축, y축 이동
translateX(tx)	x축 이동
translateY(ty)	y축 이동
scale(sx,sy)	지정한 크기만큼 확대/축소
scaleX(sx)	x축 확대/축소
scaleY(sy)	y축 확대/축소
rotate(각도)	지정된 각도만큼 회전
skew(ax, ay)	지정한 각도만큼 x축, y축 왜곡
skewX(ax)	x축 왜곡
skewY(ay)	y축 왜곡

.3차원 변형 함수, 이전 브라우저를 위해 '-webkit-', '-moz-' 접두사 붙여 사용

변형 함수	설명
matrix3d(n,[,n])	4*4행렬 이용하여 이동, 확대/축소, 회전
translate3d(tx,ty,tz)	x,y,z축 이동
translateZ(tz)	z축 이동
scale3d(sx,sy,sz)	x,y,z축 확대/축소
scaleZ(sz)	z축 확대/축소
rotate3d(rx,ry,rz,각도)	지정된 각도만큼 회전
rotateX(각도)	x축 회전
rotateY(각도)	y축 회전
rotateZ(각도)	z축 회전
perspective(길이)	입체적으로 보일 수 있는 깊이 값 지정

 

transform-origin 속성 - 변형 기준점 설정

 .축이 아닌 특정 지점을 변형의 기준으로 설정

 .transform-origin:<x축> <y축> < z축> | initial | inherit ;

 

perspective, perspective-origin 속성 - 원근감 표현

 .perspective:<크기> | none;

 .perspective-origin : <x축 값> | <y축 값>;

 

transform-style 속성 - 3D 변형 적용

 .transform-style : flat | preserve-3d

 

backface-visibility 속성 - 요소의 뒷면 표시

 .backface-visibility : visible | hidden

 

transition

 .스타일의 속성 바뀌는 것

 

transition-property - 트랜지션 적용할 속성 지정

 .transition-property : all | none | <속성 이름>

 .기본값은 모든 속성이 대상됨

 

transition-duration - 트랜지션 진행 시간 지정

 .transition-duration : <시간>

 .기본 0초 설정, 여러 개 진행 시 ',' 로 구분하여 지정

 

transition-timing-function - 트랜지션 속도 곡선 지정

 .transition-timing-function : linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)

 .ease : 처음에 천천히 중간 빠르게 마지막 천천히

 .ease-in : 시작을 느리게

 .ease-out : 마지막 느리게

 .ease-in-out : 시작과 끝 느리게

 .cubic-bezier(n,n,n,n) : 베지에 함수 직접 정의, n = 0~1

 

transition-delay - 지연 시간 설정

 .transition-delay : <시간>

 

transition - 트랜지션 속성 한꺼번에 지정

 .transition : <property> | <duration> | <timing-function> | <delay>

 

애니메이션

 

 .트랜지션의 자동 중간 스타일 추가와 달리 CSS애니메이션은 keyframe 에서 스타일 바꾸며 정의 가능

 

@keyframes - 애니메이션 지점 설정

 .@keyframes <animation 이름>{ <선택자>{<스타일>}}

 .from, to 로 시작과 끝 위치 지정 가능

 

animation-name - 애니메이션 이름 지정

 .animation-name : <키프레임 이름> | none

 

animation-duration - 실행 시간 설정

 .animation-duration : <시간>

 .기본값 0으로 지정 안할 시 애니메이션 진행 x

 

animation-direction - 애니메이션 방향 지정

 .animation-direction : normal | alternate

 .normal : 끝가지 실행하면 원래 위치로 이동

 .alternate : 되돌아가면서 애니메이션 실행

 

animation-iteration-count - 반복 횟수 지정

 .animation-iteration-count : <숫자> | infinite

 

animation-timing-function - 애니메이션 속도 곡선 지정

 .animation-timing-function : linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)

 

animation - 애니메이션 속성 일괄 표기

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