- slide 1 of 23, currently active
- slide 2 of 23
- slide 3 of 23
- slide 4 of 23
- slide 5 of 23
- slide 6 of 23
- slide 7 of 23
- slide 8 of 23
- slide 9 of 23
- slide 10 of 23
- slide 11 of 23
- slide 12 of 23
- slide 13 of 23
- slide 14 of 23
- slide 15 of 23
- slide 16 of 23
- slide 17 of 23
- slide 18 of 23
- slide 19 of 23
- slide 20 of 23
- slide 21 of 23
- slide 22 of 23
- slide 23 of 23
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)의 스타일을 적용하고 대기합니다. |