본문 바로가기

Webstoryboy

Category

Explanation

REFERENCE/CSS

[CSS] animation-duration

animation-duration

animation-duration 속성은 애니메이션 움직임 시간을 설정합니다.


animation-duration

animation-duration 속성은 애니메이션 움직임 시간을 설정합니다.

정의(Definition)

  • animation-duration 속성은 애니메이션 움직임 시간을 설정합니다.

문법(Syntax)

animation-duration : time | inherit;

속성(Property)

속성값 설명
time 애니메이션의 작동 시간을 설정합니다.

Sample1

클릭하면 애니메이션 시간을 설정한 예시입니다.

결과
durtion1
durtion2
durtion3
durtion4
durtion5
CSS
.durtion1 {animation: move1 1s 1 ease}
.durtion2 {animation: move1 2s 1 ease}
.durtion3 {animation: move1 3s 1 ease}
.durtion4 {animation: move1 4s 1 ease}
.durtion5 {animation: move1 5s 1 ease} 

호환성(Compatibility) 더보기 caniuse.com

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
animation-duration 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능

참고(Reference)

  • MDN
  • CSS Animations

AD

comments