Css로 애니메이션 구현하기

 

 

 

css로 애니메이션으로 구현하지 2가지 속성을 사용한다.

바로 animation과 @keyframes이다.

 

 

 

구조는 animation에서 어떤 효과를 넣을지 설정하고

@keyframes에서 특정 구간별로 설정을 할수있다.

 

 

 

 

 

1. animation

.animation {
	animation-name: 이름;
	animation-duration: 0s;			/* 실행 시간 */
	animation-timing-function: ease;	/* 속도 조절 */
	animation-delay:  0s;			/* 시작 전 지연시간*/
	animation-direction: normal; 		/* 애니메이션 움직임 방향 */
	animation-iteration-count: 1; 		/* 반복 횟수 */
	animation-fill-mode: none;		/* 애니메이션 시작/끝 상태 제어 */
    }

 

1.1) animation-name

애니메이션의 이름을 지정하는 설정으로

@keyframes에서 구분지어 각 애니메이션마다 설정할 수 있다 .

 

 

 

1.2) animation-duration

애니메이션이 실행되는 시간을 지정한다.

시간이 짧을수록 빠르고 길수록 느려진다.

 

 

 

1.3) animation-timing-function

애니메이션이 실행되는 동안 시간이나 움직임을 상세하게 지정할 수 있다.

속성	설명
linear (기본값)	처음과 마지막 속도가 일정.
ease	처음엔 천천히 시작하다가 빨라지고 마지막에 다시 느려진다.
ease-in	천천히 시작하다가 정상 속도가 된다.
ease-out	정상속도로 시작하다 마지막에 천천히 속도를 줄이며 끝난다.
ease-in-out	천천히 시작하다가 정상 속도가 되고 마지막에 느려진다.
step-start	애니메이션을 시작점에서만 표현.
step-end	애니메이션을 끝점에서만 표현.
steps(int, start|end)	애니메이션을 단계별로 설정.
cubic-bezier(n,n,n,n)	베지어 곡선값을 만들어서 속도를 설정
inherit	애니메이션 움직임을 상위 요소한테 상속받음

출처 및 자세한 내용 보기 : https://webstoryboy.co.kr/1671

 

 

 

1.4) animation-delay

애니메이션이 시작되기전 소요되는 시간을 지정한다.

 

 

 

1.5) animation-direction

애니메이션이 움직이는 방향을 설정한다.

속성	설명
nomarl (기본값)	정방향으로 실행.
reverse	역방향으로 실행.
alternate	정방향으로 실행하고 반대로 역방향으로 실행한다.
alternate-reverse	역방향으로 실행하고 반대로 정방향으로 실행한다.

 

 

 

1.5) animation-iteration-count

애니메이션의 반복 횟수를 지정하며 지정된 횟수가 모두 진행되면 멈춘다.

 

 

 

1.5) animation-fill-mode

애니메이션 시작과 끝 상태를 설정한다.

 

 

 

 

 

2. @keyframes

animation은 처음과 끝, 또는 제한적인 범위 내에서 설정할 수 있다.

하지만 @keyframes은 0 ~ 100%까지 세부적으로 구간을 나누어

원하는 애니메이션을 추가할 수 있다.

@keyframes animationName{
  0% {
  	// 실행될 코드
  }
  100% {
	// 실행될 코드
  }
}