animation-fill-mode 속성

animation-fill-mode 속성은 애니메이션이 종료된 후 어느 위치에서 멈출지 설정합니다. 기본적으로 애니메이션은 초기 값으로 돌아가며, 이는 그다지 아름답게 보이지 않을 수 있습니다.

구문

선택자 {
	animation-fill-mode: backwards | forwards | both | none;
}

값

값	설명
`none`	애니메이션 지연 시간이 설정된 경우, 지연 시간 동안 요소는 제자리에 머물다가 `0%` 프레임으로 점프합니다. 애니메이션이 끝난 후 요소는 멈춘 상태에 머물지 않고 초기 상태로 점프합니다.
`backwards`	`animation-delay` 지연 시간이 설정되어 있더라도 페이지가 로드된 후 요소를 `0%` 프레임으로 이동시켜 애니메이션이 시작될 때까지 그 위치에 머물게 합니다. 애니메이션이 끝난 후 요소는 멈춘 상태에 머물지 않고 초기 상태로 점프합니다.
`forwards`	애니메이션이 끝난 후 요소가 멈춘 상태에 머물도록 브라우저에 지시합니다.
`both`	backwards와 forwards를 모두 포함합니다. 페이지가 로드된 후 요소는 `0%` 프레임으로 설정되고, 애니메이션이 끝난 후 요소는 멈춘 위치에 머뭅니다.

기본값: none.

예제 . none 값

이 예제에서 요소의 margin-left는 300px로 설정되고, 애니메이션의 첫 번째 프레임은 0px입니다. animation-delay 지연 시간이 없기 때문에, 페이지가 로드된 후 요소는 300px가 아닌 0px에 위치합니다. 또한, 애니메이션이 끝난 후에는 초기 값으로 점프합니다:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

예제 . none 값

이 예제에서 요소의 margin-left는 300px로 설정되고, 애니메이션의 첫 번째 프레임은 0px입니다. 또한 요소에 animation-delay가 3초로 설정되어 있으므로, 페이지가 로드된 후 요소는 0px가 아닌 300px에 위치하며, 애니메이션이 시작된 후 3초 동안 그 자리에 머물다가 0px로 점프하여 애니메이션이 그 지점에서 시작됩니다. 또한, 애니메이션이 끝난 후에는 초기 값으로 점프합니다:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

예제 . backwards 값

이 예제에서 요소의 margin-left는 300px로 설정되고, 애니메이션의 첫 번째 프레임은 0px입니다. 또한 요소에 animation-fill-mode가 backwards 값으로 설정되어 있으므로, 페이지가 로드된 후 요소는 animation-fill-mode가 none 값일 때와 달리 300px가 아닌 0px에 위치합니다. 또한, 애니메이션이 끝난 후에는 초기 값으로 점프합니다:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: backwards;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

예제 . none 값 및 반복 횟수 1

이 예제에서 요소의 margin-left는 300px로 설정되고, 애니메이션의 첫 번째 프레임은 0px입니다. 또한 요소에 animation-delay가 3초로 설정되어 있으므로, 페이지가 로드된 후 요소는 0px가 아닌 300px에 위치하며, 애니메이션이 시작된 후 3초 동안 그 자리에 머물다가 0px로 점프하여 애니메이션이 그 지점에서 시작됩니다. animation-fill-mode가 none 값으로 설정되어 있으므로, 애니메이션 재생 후 요소는 초기 값으로 돌아갑니다:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

예제 . forwards 값 및 반복 횟수 1

이 예제에서 animation-fill-mode는 forwards 값으로 설정되었고, 애니메이션 반복 횟수는 1입니다. 애니메이션 재생 후 요소는 원래 지점으로 점프하지 않고 애니메이션이 끝난 위치에 머뭅니다.

또한, 요소의 margin-left는 300px로 설정되고, 애니메이션의 첫 번째 프레임은 0px입니다. 요소에 animation-delay가 3초로 설정되어 있으므로, 페이지가 로드된 후 요소는 0px가 아닌 300px에 위치하며, 애니메이션이 시작된 후 3초 동안 그 자리에 머물다가 0px로 점프하여 애니메이션이 그 지점에서 시작됩니다:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: forwards;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

예제 . both 값 및 반복 횟수 1

이 예제에서 animation-fill-mode는 both 값으로 설정되었고, 애니메이션 반복 횟수는 1입니다. 페이지가 로드된 후 요소는 애니메이션의 첫 번째 프레임(300px가 아닌 0px)에 위치하며, 애니메이션 재생 후 요소는 원래 지점으로 점프하지 않고 애니메이션이 끝난 위치에 머뭅니다:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: both;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

참고 항목

애니메이션 이름을 지정하는 animation-name 속성
애니메이션 지속 시간을 지정하는 animation-duration 속성
애니메이션 실행 전 지연 시간을 지정하는 animation-delay 속성
애니메이션 실행 속도를 지정하는 animation-timing-function 속성
애니메이션 반복 횟수를 지정하는 animation-iteration-count 속성
애니메이션 방향을 지정하는 animation-direction 속성
애니메이션을 일시 중지할 수 있게 하는 animation-play-state 속성
애니메이션을 위한 단축 속성인 animation 속성
애니메이션 키프레임을 정의하는 @keyframes 명령어
요소에 마우스를 올렸을 때의 애니메이션인 부드러운 전환 transition