animation-fill-mode
animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다.
animation-fill-mode
animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다.
| 특징 | 설명 |
|---|---|
| 기본 값 | animation-fill-mode : none; |
| 상속 | 안됨 |
| 애니메이션 | 안됨 |
| 적용 | animations |
| 버전 | CSS3 |
정의(Definition)
- animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다.
문법(Syntax)
animation-fill-mode : none | forwards | backwards | both | inherit;
속성(Property)
| 속성값 | 설명 |
|---|---|
| none | 애니메이션이 끝난 후 상태를 설정하지 않습니다. |
| forwards | 애니메이션이 끝난 후 그 지점에 그대로 있습니다. |
| backwards | 애니메이션이 끝난 후 시작점으로 돌아옵니다. |
| both | 애니메이션이의 앞 뒤 결과를 조합하여 설정합니다. |
| inherit | 애니메이션의 상태를 상위 요소한테 상속받습니다. |
Sample1
클릭하면 애니메이션이 끝난 후 상태를 설정하는 예제입니다.
CSS
.none {animation: move2 3s 10 ease;}
.forwards {animation: move2 3s 10 ease forwards;}
.backwards {animation: move2 3s 10 ease backwards;}
.both {animation: move2 3s 10 ease both;}
@keyframes move3 {
0% {left: 0%;}
100% {left: calc(100% - 70px);}
}
호환성(Compatibility)
더보기
caniuse.com 
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| animation-fill-mode | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
참고(Reference)
- MDN
- CSS Animations
