6.7.5 animation-fill-mode 속성
애니메이션이 끝나도 원래 상태로 돌아가지 않고 애니메이션이 종료된 시점의 상태를 유지하길 원할 수도 있습니다. 이럴 때는 animation-fill-mode 속성을 사용하면 됩니다. animation-fill-mode 속성은 애니메이션이 실행되기 전과 후의 스타일을 지정합니다. 사용할 수 있는 속성값은 다음 표와 같습니다.
표 6-23 animation-fill-mode 속성값
|
속성값 |
상태 |
설명 |
|
none |
실행 전 |
시작 시점(0%, from)의 스타일을 적용하지 않고 대기합니다. |
|
실행 후 |
실행되기 전의 스타일 적용 상태로 돌아갑니다. |
|
|
forwards |
실행 전 |
시작 시점(0%, from)의 스타일을 적용하지 않고 대기합니다. |
|
실행 후 |
키 프레임에 정의된 종료 시점(100%, to)의 스타일을 적용하고 대기합니다. |
|
|
backwards |
실행 전 |
키 프레임에 정의된 시작 시점(0%, from)의 스타일을 적용하고 대기합니다. |
|
실행 후 |
실행되기 전의 스타일 적용 상태로 돌아갑니다. |
|
|
both |
실행 전 |
키 프레임에 정의된 시작 시점(0%, from)의 스타일을 적용하고 대기합니다. |
|
실행 후 |
키 프레임에 정의된 종료 시점(100%, to)의 스타일을 적용하고 대기합니다. |