CSS

CSS 애니메이션

Mia_ 2023. 1. 17. 10:18

CSS 애니메이션

- 여러 개의 CSS 스타일을 부드럽게 전환 시켜줌

- 그 중에서도 @keyframes 키워드를 활용하면 시간 순서대로 정밀하게 짤 수 있음 

 

1. @keyframes

- 키프레임을 할용하기 위해서는 우선 CSS로 키프레임 블록을 만든다

/* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */

@keyframes 애니메이션이름 {
	0% {            /* from 이라고 작성해도 됩니다.*/
		CSS속성 : 속성값; 
	}

	50% {           /* 애니메이션 진행도에 따른 스타일을 설정합니다. */
                  /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/
		CSS속성 : 속성값;
	}

	100% {          /* to 라고 작성해도 됩니다.*/
		CSS속성 : 속성값;
	}
}

- 해당 키 프레임 애니메이션을 적용 시키고 싶은 요소에 animation 속성으로 키프레임을 불러오면 사용 가능

- 키프레임을 사용하기 위해서는 애니메이션 이외에도 다양한 속성들을 줘야 함

 

 

2. 애니메이션 속성

- animation 에 전달해 줄 수 있는 속성들 

· animation-name : 애니메이션의 중간 상태를 지정하는 이름, @keyframes 블록에 작성
· animation-duration : 한 사이틀의 애니메이션이 재생될 시간
· animation-delay : 애니메이션의 시작을 지연시킬 시간 지정
· animation-direction : 애니메이션 재생 방향을 지정
· animation-iteraction-count : 애니메이션을 몇 번 반복 될지 지징
· animation-play-state : 애니메이션 재생 상태. 멈추거나 다시 재생 시킬 수 있음
· animation-timing-fucntion : 중간 상태들의 전환을 어떤 시간 간격으로 진행할지 지정
· animation-fill-mode : 애니메이션의 재성 전 후의 상태 지정

 

animation-name

- 애니메이션을 적용하고 싶은 요소에 animation 속성의 첫번째 값

- animation-name 이라는 속성으로 @keyframes 키워드를 사용해서 만든 애니메이션에 이름을 주면 됨

#logo {
	animation : lotate;
}
#logo {
	animation-name : lotate;
}

 

animation-duration

- 애니메이션이 재생될 시간을 시간 단위로 작성

- 작성하지 않을 경우 기본값이 0 이므로 애니메이션이 재생되지 않음

#logo {
	animation : lotate 3s ;
}
#logo {
	animation-name : lotate;
	animation-duration : 3s;
}

 

animation-delay

- 애니메이션을 미룰 시간을 지정, 시간 단위로 작성

- 예를 들어 값을 0s로 지정해 주면 즉시, 3s로 지정하면 3초 후 애니메이션이 재생 됨

 

animation-direction

- 애니메이션 재생 방향 지정 

- 전달 해줄 수 있는 값

· normal : 기본값. 재생이 끝나면 처음부터 다시 재생
· reverse : 역방향으로 재생
· alternate : 순방향부터 역방향으로 번갈아가며 재생
· alternate-reverse : 역방향부터 순방향을 번갈아가며 재생

 

animation-iteraction-count

- 애니메이션이 몇 번 재생될지 지정

- 기본값은 1이며, 설정한 횟수만큼 애니메이션이 반복 재생

- infinite로 설정할 경우 무한 반복되며, 소수점으로 작성할 경우 재생 도중 처음 상태로 돌아감

- 예를 들어 재생 시간이 3초일 때, 0.6을 전달한 경우 3 * 0.6을 한 1.8초만큼 재생되고 처음 상태로 돌아감

#logo {
	animation-name : lotate;
	animation-duration : 3s;
	animation-iteration-count : 3 ;
/* 애니메이션이 3번 반복 됩니다. */
}

 

animation-play-state

- 애니메이션 재생 상태를 설정

- 기본 값인 running, 애니메이션을 정지시키는 pause를 값으로 지정할 수 있음

- 보통 이벤트로 애니메이션을 재생 상태를 변경할 때 사용

#logo {
	animation-name : lotate;
	animation-duration : 3s;
	animation-play-state : pause ;
}

 

animation-timing-function

- 애니메이션의 진행 속도를 설정

 

animation-fill-mode 

- 애니메이션 재생 전후 상태 지정

· none : 기본 값. 재생중이 아닌 경우 요소의 스타일 유지
· forwards : 재생 중이 아닌 경우 마지막 키프레임 스타일 유지
· backwards : 재생 중이 아닌 경우 첫 번째 키프레임 스타일 유지
· both : 재생 전에는 첫 번째 키프레임 스타일을, 재생 후에는 마지막 키프레임 스타일을 유지