CSS 애니메이션

ZeroJun·2022년 7월 22일

CSS

목록 보기

4/4

CSS 애니메이션은 여러 개의 CSS 스타일을 부드럽게 전환시켜준다. 그 중에서도 @keyframes 키워드를 활용하면 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있다.

@keyframes

키 프레임을 활용하기 위해서는 우선 CSS로 키프레임 블록을 만들어야 한다.

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

@keyframes 애니메이션이름 {
	0% {
    	CSS속성 : 속성값;
    }
    
    50% {
    	CSS속성 : 속성값;
    }
    
    100% {
    	CSS속성 : 속성값;
    }
}

다음은 이를 활용한 회전하는 키프레임 애니메이션이다.

@keyframes 애니메이션이름 {
	0% {
    	transform : rotate(0deg);
    }
    
    50% {
    	transform : rotate(180deg);
    }
    
    100% {
    	transform : rotate(360deg);
    }
}

animation 속성

animation에 전달해 줄 수 있는 속성들은 다음과 같다.

animation : 띄어쓰기로 쭉 나열하면 아래의 속성들을 한 번에 지정할 수 있음
- animation-name : 애니메이션의 중간 상태를 지정하는 이름. @keyframes 블록에 작성
- animation-duration : 한 싸이클의 애니메이션이 재생될 시간 지정
- animation-delay : 애니메이션의 시작을 지연시킬 시간 지정
- animation-direction : 애니메이션 재생 방향을 지정
- animation-iteration-count : 애니메이션이 몇 번 반복될지 지정
- animation-play-state : 애니메이션을 재생 상태. 멈추거나 다시 재생 시킬 수 있음
- animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정
- animation-fill-mode : 애니메이션이 재생 전 후의 상태 지정

animation-name

애니메이션을 적용하고 싶은 요소에 animation이나 animation-name이라는 속성에 @keyframes키워드를 사용해서 만든 애니메이션 이름을 작성해주면 된다.

#logo {
	animation : lotate;
}

#logo {
	acnimation-name: lotate;
}

이 속성만으로는 애니메이션이 재생되지 않는다. 여러 속성들 중 최소한 animation-name과 animation-duration은 지정해줘야 애니메이션이 실행되기 때문이다.

animation-dutation

애니메이션이 재생될 시간을 animation 속성의 두번째 값으로, 혹은 animation-dutation이라는 속성으로 시간 단위를 작성해준다. 작성해주지 않을 경우 기본 값이 0이기 때문에 애니메이션이 재생되지 않는다.

#logo {
	animation : lotate 3s;
} 

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

animation-delay

애니메이션 재생을 미룰 시간을 지정한다. 역시 animation 속성에 띄어쓰기로 구분해준 다음, 혹은 animation-delay 이라는 속성으로 시간 단위로 작성해준다.

#logo {
	animation : lotate 3s 3s;
}

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

animation-direction

애니메이션 재생 방향을 지정한다. 역시 animation 속성에 띄어쓰기로 구분해준다음, 혹은 animation-direction이라는 속성을 작성해준다.

#logo {
	animation: lotate 3s reverse;
}

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

전달해줄 수 있는 값은 다음과 같다.

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

animation-iteration-count

애니메이션이 몇 번 재생될지 지정한다. 기본 값은 1이며, 설정한 횟수만큼 애니메이션이 반복 재생된다. infinite로 설정할 경우 무한 반복되며, 소수점을 작성할 경우 재생 도중 처음 상태로 돌아간다. 예를 들어, 재생 시간이 3초일 때, 0.6을 전달할 경우 3 * 0.6을 한 1.8초만큼만 재생되고 처음 상태로 돌아가게 된다.

#logo {
	animation : lotate 3s infinite
}

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

animation-play-state

애니메이션의 재생 상태를 설정한다. 기본 값인 running, 애니메이션을 정지시키는 pause를 값으로 지정할 수 있다. 보통 이벤트로 애니메이션의 재생 상태를 변경할 때 사용한다.

#logo {
	animation: lotate 3s pause;
}

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

animation-timing-function

애니메이션의 진행 속도를 설정한다.

animation-fill-mode

애니메이션 재생 전 후의 상태를 지정한다.

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

@keyframes 중간값의 의미

#logo {
	**animation-name : lotate;**    /* lotate 라는 이름의 키프레임 애니메이션을 */
	animation-duration : 3s;               /* 3초 동안 재생하며, */
	animation-iteration-count : infinite;  /* 애니메이션을 무한 반복하고, */
  animation-timing-function : linear;    /* 선형으로 재생. */
}

/* 아래와 같이 일괄 작성해도 동일하게 적용. */

#logo {
	animation : **lotate** 3s infinite linear;
}