Dynamic

@keyframes

1.  개념

• @keyframes로 어떤 모양에서 어떤 모양으로 변할지 지정
• IE는 버전 10 이상에서 사용 가능

@keyframes animationName {
	0% {
		/* 애니메이션의 시작 상태 */
	}
	n% {
		/* 중간 상태 */
	}
	100% {
		/* 애니메이션의 끝 상태 */
	}
} 
.element {
	animation-name: animationName; /* 정의한 애니메이션 이름 사용 */
	animation-duration: 2s; /* 애니메이션의 지속 시간 */
}

 

2.  단계

0%	시작할 때의 모양 지정 0% 대신 from을 사용 가능
n%	n% 일 때의 모양 지정
100%	끝날 때의 모양 지정 100% 대신 to를 사용 가능

 

3.  예제

CSS\webapp\08_cssDynamic
exam01.html

 

---

 

transform, transition 속성

transform

1.  transform: scale;

• box안의 이미지를 확대할 때 사용

 

2.  함수 values;

transform: rotate(Ndeg);	Nº 만큼 시계 방향(양수)이나 반시계 방향(음수)으로 회전
transform: skew(Ndeg, Mdeg)	x축방향으로 Nº 만큼, y축 방향으로 Mº만큼 기울임
transform: translate(Npx, Mpx);	x축 N px, M px 만큼 이동 주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동
transform: scale(N, M);	x축으로 N배, y축으로 M배 늘리거나 줄임 주어진 배율이 1보다 크면 크기를 늘리고, 0보다 크고 1보다 작으면 크기를 줄임

 

 

transition 

1.  transition:

• 시간의 흐름을 줘서 부드럽게 확대되도록 설정
• ease; 기본값, 느리게 시작해서 빠르게 전환한 다음 다시 천천히 종료
• linear; 처음부터 끝까지 같은 속도로 전환

 

 

⚒️ 예제

CSS\webapp\05_cssPositioning
exam10.html
CSS\webapp\08_cssDynamic
exam02.html
exam03.html