CSS3와 애니메이션

변형

2차원 변형과 3차원 변형

transform과 변형 함수

transform(45deg), scale(0.7)(1이 1배), rotate(20deg), skew(30deg)

변형과 관련된 속성들

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

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

transform-origin : <x축> <y축> <z축> | initial | inherit (백분율, left, center, right |  top, center, bottom | 길이)

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

0보다 커야하고 클 수록 밀어냄

perspective : <크기> | none ( ex) 300px)

perspective-origin : <x축 값> | <y축 값>; ( ex) 60%,top)(기본값이 50%)

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

transform-style : flat(하위 요소 평면) | preserve-3d(하위 요소 3d)

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

backface-visibility : visible(뒷면 표시, 기본 값) | hidden(뒷면 표시x)

트랜지션

이것도 앞에 webkit moz o붙여야 돼

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

transition-property : all | none | <속성이름> (ex) background-color width height)

transition-duration 속성 - 트랜지션 진행 시간 지정하기

transition-duration : <시간> (속성 여러개면 쉼표로 각각표시) (ex) 2s, 1s)

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

linear : 시작부터 끝까지 똑같은 속도

ease : 처음에는 천천히, 점점 빨라져, 마지막에는 천천히(기본 값)

ease-in : 시작을 느리게

ease-out : 느리게 끝내

ease-in-out : 느리게 시작하고 느리게 끝냅니다.

cubic-bezier(n,n,n,n) : 베지에 함수를 직접 정의해 사용, n에서 사용할 수 있는 값은 0~1

transition-delay 속성 - 지연 시간 설정하기

transition 속성 - 트랜지션 속성 한꺼번에 표기하기

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

애니메이션

@keyframes 속성 - 애니메이션 지점 설정하기

@keyframes <이름>{ <선택자>{ <스타일>} } (from은 0%, to는 100%)

	div {
		width: 100px;
		height: 100px;
		background-color: blue;
		-webkit-animation-name: change-bg;
		-moz-animation-name: change-bg;
		-o-animation-name: change-bg;
		animation-name: change-bg;
		-webkit-animation-duration: 3s;
		-moz-animation-duration: 3s;
		-o-animation-duration: 3s;
		animation-duration: 3s;
	}

	@-webkit-keyframes change-bg{~~}
	@-moz-keyframes change-bg {~~}
	@-o-keyframes change-bg {~~}
	@keyframes change-bg {
		from {
			background-color: blue;
			border: 1px solid black;
		}
		to {
			background-color: #a5d6ff;
			border:1px solid blue;
			border-radius: 50%;
		}
	}

animation-name 속성 - 애니메이션 이름 지정하기

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

 

animation-duration 속성 - 애니메이션 실행 시간 설정하기

animation-direction 속성 - 애니메이션 방향 지정하기

animation-direction : normal | alternate(애니메이션을 끝까지 실행하면 왔더 방향으로 되돌아가면서 애니메이션 실행)

animation-iteration-count 속성 - 반복 횟수 지정하기

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

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

animation 속성 - 애니메이션 관련 속성 한꺼번에 표기하기

<animation-name> | <animation-duration> | <animation-timing-function> | <animation-delay> | <animation-iteration-count> | <animation-direction>