본문 바로가기

Webstoryboy

Category

Explanation

REFERENCE/CSS

[CSS] animation-fill-mode

animation-fill-mode

animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다.


animation-fill-mode

animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다.

정의(Definition)

  • animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다.

문법(Syntax)

animation-fill-mode : none | forwards | backwards | both | inherit;

속성(Property)

속성값 설명
none 애니메이션이 끝난 후 상태를 설정하지 않습니다.
forwards 애니메이션이 끝난 후 그 지점에 그대로 있습니다.
backwards 애니메이션이 끝난 후 시작점으로 돌아옵니다.
both 애니메이션이의 앞 뒤 결과를 조합하여 설정합니다.
inherit 애니메이션의 상태를 상위 요소한테 상속받습니다.

Sample1

클릭하면 애니메이션이 끝난 후 상태를 설정하는 예제입니다.

결과
none
forwards
backwards
both
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 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
animation-fill-mode 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능

참고(Reference)

  • MDN
  • CSS Animations

AD

comments