⌘K

animation-fill-mode 속성

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

구문

css선택자 {
  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에 위치합니다. 또한, 애니메이션이 끝난 후에는 초기 값으로 점프합니다: 

html<div id="elem"></div>
css@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로 점프하여 애니메이션이 그 지점에서 시작됩니다. 또한, 애니메이션이 끝난 후에는 초기 값으로 점프합니다: 

html<div id="elem"></div>
css@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에 위치합니다. 또한, 애니메이션이 끝난 후에는 초기 값으로 점프합니다: 

html<div id="elem"></div>
css@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 값으로 설정되어 있으므로, 애니메이션 재생 후 요소는 초기 값으로 돌아갑니다: 

html<div id="elem"></div>
css@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로 점프하여 애니메이션이 그 지점에서 시작됩니다: 

html<div id="elem"></div>
css@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)에 위치하며, 애니메이션 재생 후 요소는 원래 지점으로 점프하지 않고 애니메이션이 끝난 위치에 머뭅니다: 

html<div id="elem"></div>
css@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;
}

Результат:

참고 항목

Back속성 animation-directionNext속성 animation-play-state