CSS 애니메이션 종료 후 마지막 키프레임 스타일 유지하기

CSS 애니메이션이 끝난 뒤에도 요소가 마지막 키프레임에서 설정한 스타일 값을 그대로 유지하게 하려면 animation-fill-mode 속성에 forwards 값을 지정하면 됩니다.

기본적으로 CSS 애니메이션은 재생이 완료되면 요소가 원래 상태로 되돌아갑니다. 하지만 animation-fill-mode: forwards;를 적용하면 애니메이션이 종료된 이후에도 마지막 키프레임(to)의 스타일이 계속 유지되어 더욱 자연스러운 연출이 가능합니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 150px;
  height: 200px;
  position: relative;
  background: red;
  animation-name: myanim;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@keyframes myanim {
  from {left: 0px; background-color: green;}
  to {left: 200px; background-color: blue;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

코드 설명

animation-name: myanim; — 적용할 @keyframes 애니메이션의 이름을 지정합니다.
animation-duration: 2s; — 애니메이션이 한 번 재생되는 시간을 2초로 설정합니다.
animation-fill-mode: forwards; — 애니메이션 종료 후에도 마지막 키프레임의 스타일을 유지하는 핵심 속성입니다.
@keyframes myanim — 시작(from)에는 초록색 배경으로 왼쪽 0px 위치에서 출발하고, 끝(to)에는 파란색 배경으로 왼쪽 200px 위치까지 이동하도록 정의합니다.

위 예제를 실행하면 빨간색 div 요소가 2초 동안 오른쪽으로 이동하면서 색상이 변하고, 애니메이션이 끝난 후에도 파란색 배경과 200px 위치가 그대로 유지되는 것을 확인할 수 있습니다. 만약 forwards 값을 제거하면 애니메이션 종료 직후 요소가 원래의 빨간색 상태로 즉시 되돌아갑니다.

CSS 애니메이션 종료 후 마지막 키프레임 스타일 유지하기 – animation-fill-mode: forwards

CSS 애니메이션 종료 후 마지막 키프레임 스타일 유지하기

예제 코드

코드 설명