Animation

오민영·2023년 2월 14일

CSS

목록 보기

16/22

애니메이션은 애니메이션을 나타내는 CSS 스타일과 sequence(분기)를 나타내는 복수의 키프레임(@keyframes)들로 이루어진다.

transition 프로퍼티는 요소 프로퍼티 값이 다른 값으로 변화할 때 주로 사용하며, 요소의 로드와 함께 자동으로 동작되지 않는다. :hover와 같은 가상 클래스 선택자나 클래스 추가 시 와 같은 부수적 액션에 의해 동작된다.

즉, transition 프로퍼티는 단순히 요소의 프로퍼티 변화에 주안점이 있다면, animation 프로퍼티는 하나의 줄거리를 구성하여 줄거리 내에서 세부의 움직임을 시간 흐름 단위로 제어할 수 있고, 전체 줄거리의 재생과 반복, 정지까지 제어할 수 있다.

프로퍼티	설명	기본값
animation-name	@keyframes 애니메이션 이름을 지정한다.
animation-duration	한 싸이클의 애니메이션에 소요되는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.	0
animation-timing-function	애니메이션 효과를 위한 타이밍 함수를 지정한다.	ease
animation-delay	요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다	0
animation-iteration-count	애니메이션 재생 횟수를 지정한다	1
animation-direction	애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다. (한 회차를 도는데에 한번 이상 진행 시 어떤 순서로 진행할 것인지)	normal
animation-fill-mode	애니메이션 미실행 시(종료 또는 대기) 요소의 스타일을 지정한다	none
animation-play-state	애니메이션 재생 상태(재생 또는 중지)를 지정한다	running
animation	모든 애니메이션 프로퍼티를 한번에 지정한다

@keyframes

CSS 의 animation과 transition의 주된 차이는 @keyframes 규칙에 있다. 이 규칙을 사용하면 애니메이션의 흐름(sequence) 중의 여러 시점(breakpoint)에서 CSS 프로퍼티 값을 부여해줄 수 있다.

div {
  position: absolute;
  width: 100px;
  height: 100px;
  animation-name: move, fadeOut, changeColor;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
@keyframes move {
  from { left: 0; }
  to   { left: 300px; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes changeColor {
  from { background-color: red; }
  to   { background-color: blue; }
}

@keyframes 규칙은 시간의 흐름에 따라 애니메이션을 정의한다.

form, to 키워드 대신에 %를 사용할 수도 있다.

@keyframes move{
	from{
		left: 0;
	}
	to{
		left: 300px;		
	}
}

@keyframes move {
  0%   { left: 0; }
  50%  { left: 100px; }
  100% { left: 300px; }
}

animation

모든 애니메이션 프로퍼티를 한번에 지정할 수 있다.

animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state

animation-duration은 반드시 지정을 해야하고, 나머지 기본값은 다음과 같다.

animation: sample 0 ease 0 1 normal none running

animation-name

@keyframes 뒤에 애니메이션을 대표하는 이름을 지정

@keyframes move{}

animation-duration

한 싸이클의 애니메이션에 소요되는 시간을 초 단위(s) / 밀리 초 단위(ms) 으로 지정

기본 값 : 0s

animation-duration은 반드시 지정해야 한다.

지정하지 않으면 0s가 설정되어 어떤 에니메이션도 실행되지 않는다.

animation-duration: 5s;

animation-timing-function

css-easing-generator

애니메이션 효과를 위한 수치 함수를 지정한다.

transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */

animation-delay

요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) / 밀리 초 단위(ms)로 지정

animation-delay: 2s;

animation-iteration-count

애니메이션 싸이클 횟수를 지정

기본 값 : 1

무한 반복으로 inifinite 속성 값을 사용할 수 있다.

animation-iteration-count: 3;
animation-iteration-count: infinite;

animation-direction

애니메이션이 한 싸이클이 종료되고 반복될 때, 다음 사이클의 진행 방향을 지정한다.

프로퍼티 값	설명
normal	기본 값으로 0% ~ 100% / from ~ to
reverse	100% ~ 0% / to ~ from
alternate	홀수번째는 normal / 짝수번째는 reverse
alternate-reverse	홀수번째는 reverse / 짝수번째는 normal

animation-fill-mode

애니메이션 미실행 시(대기 / 종료) 요소의 스타일 지정

프로퍼티값	상태	설명
none	대기	시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
	종료	애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
forwards	대기	시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
	종료	종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
backwards	대기	시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
	종료	애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
both	대기	시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
	종료	종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.