css 애니메이션 효과(3/2 공부)

출처- https://youtu.be/krdFNe2R27E

@keyframes 는 움직임 시간의 흐름을 관리하는 규칙.

@keyframes name{
	from{ /* 속성: 값 */ } /* from : 애니메이션의 시작 장면 */
	n% { /* 속성: 값 */ } /* n% : 시작점부터 n% 흐른 시점의 장면. ex) 시작점부터 50% 흐른 시점 */
    to { /* 속성: 값 */ } /* to : 끝이 되는 장면 */
	
}

/* 여기서 장면은 실제 추가적인 장면이라기 보다는 프레임 단위의 행위..? 동작..? 을 뜻하는 듯 함 */

animation-name : @keyframes 애니메이션의 이름을 지정해서 요소로 가져온다.

animation-duration : 애니메이션이 한 주기를 완료하는데 걸리는 시간을 정의

animation-delay : 애니메이션 시작에 대한 지연을 지정.

animation-iteration-count : 애니메이션을 재생해야 하는 횟수를 지정.

animation-direction : 애니메이션을 앞으로, 뒤로 또는 번갈아 재생해야 하는지 여부를 정의

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

animation-fill-mode : 애니메이션이 재생되지 않을 때(시작 전, 종료 후 또는 둘 다) 요소의 스타일을 지정

animation-play-state : 애니메이션이 실행 중인지 일시 중지되었는지 지정.

 

1.animation-name & animation-duration (ctrl + F 를 이용하면 찾기가 편합니다.)

css

/* 애니메이션 선언 */
/* img를 왼쪽 끝에서 오른쪽 끝으로 보내는 애니메이션. */
@keyframes move{ /* move 라는 이름의 애니메이션 선언 */
	from{ /* 애니메이션의 시작점 */
		left: 0;
		transform: rotate(0deg);
	}
	to{ /* 애니메이션의 끝점 */
		left: 500px;
		transform: rotate(360deg);
	}
}
/* animation-name 등장 */
img{
	animation-name : move; /* 애니메이션을 적용할 태그 or 클래스에 애니메이션 move를 연결 */
	animation-duration : 1s; /* 애니메이션이 동작할 시간. 이걸 적용안하면 애니메이션이 동작하지 않음. */
	position : relative; /* move를 보면 left 라는 속성을 사용했음. 이는 position 속성으로 기준점을 잡아줘야한다. */
}

/* img가 여러개라면 각각의 이미지의 duration을 따로 줄 수도 있음. */
img:nth-child(1){ /* :nth-child(n) 에서 첫 번째 자식은 0이 아니라 1이다. */
	animation-duration : 1s;
}
img:nth-child(2){
	animation-duration : 2s;
}

 

2. animation-iteration-count

css
/* 우선 1번에서 이용한 keyframes를 그대로 이용. */

img:nth-child(1){
	animation-iteration-count : 1; /* 기본 값, 한 번 재생 */
}
img:nth-child(2){
	animation-iteration-count : 4; /* 네 번 재생 */
}
img:nth-child(3){
	animation-iteration-count : infinite; /* 무한 재생 */
}

 

3. animation-direction

상단의 keyframes를 이용..


/* animation-direction 은 애니메이션을 앞으로, 뒤로, 또는 번갈아 재생 할 것인지를 정한다. */

img:nth-child(1){
	animation-direction : normal; /* 기본 값, 정방향 */
}
img:nth-child(2){
	animation-direction : reverse; /* 역방향 */
}
img:nth-child(3){
	animation-direction : alternate; /* 왕복 - 애니메이션 재생 횟수가 많아야함. 그래야 왕복이 보임. */
}
img:nth-child(4){
	animation-direction : alternate-reverse; /* 역방향 왕복 */
}

 

 

 

 

 

4. animation-delay

/* 상단의 keyframes 이용 */
/* 애니메이션 시작 전 delay(지연)를 걸어줌 */
img:nth-child(1){
	animation-delay: 0.5s;
}

5. animation-fill-mode

/* 상단의 keyframes 이용 */

/* animation-fill-mode : 애니메이션이 재생되지 않을 때(시작 전, 종료 후, 혹은 둘 다) 요소의 스타일을 지정 */
img:nth-child(1){
	animation-fill-mode : backwards; /* 정지시 첫 번째 키프레임(from)으로 이동. */
}
img:nth-child(2){
	animation-fill-mode : forwards; /* 정지시 마지막 키프레임(to)으로 이동. */
}

6. animation-play-state 

/* 상단의 keyframes 이용 */

/* animation-play-state : 애니메이션이 실행중인지, 일시 중지 되었는지 지정. */

img:hover{/* 이미지 위에 마우스를 올려 두었을 때. */
	animation-play-state : paused; /* 제자리에 멈춤. 이미지에서 마우스를 떼면 다시 움직임. */
}

7. animation-timing-function

/* 상단의 keyframes 이용 */

/* animation-timing-funtion : 애니메이션의 속도 곡선을 지정. */

img:nth-child(1){
	animation-timing-funtion : ease; /* 기본 값(기본 속도) */
}
img:nth-child(1){
	animation-timing-funtion : ease-in; /* 가속 */
}
img:nth-child(1){
	animation-timing-funtion : ease-out; /* 감속 */
}
img:nth-child(1){
	animation-timing-funtion : ease-in-out;  /* 시작은 감속 돌아올 때는 감속 */
}
img:nth-child(1){
	animation-timing-funtion : linear; /* 균등 속도 */
}
img:nth-child(1){
	animation-timing-funtion : cubic-bezier(0.785,0.135,0.15,0.86);; /* 속도 곡선을 임의로 만듦 */
}

 

animation 도 한줄로 작성 할 수 있다.

 

 

animation : /* 이름 시간 속도 지연시간 횟수 방향 fillmode playstate; */

animation : /* (name) (duration) (timing-funtion) (delay) (iteration-count) (direction) (fill-mode) (play-state); */