본문 바로가기

Webstoryboy

Category

Explanation

REFERENCE/CSS

[CSS] animation-delay

animation-delay

animation-delay 속성은 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간을 나타냅니다.


animation-delay

animation-delay 속성은 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간을 나타냅니다.

정의(Definition)

  • animation 속성은 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간을 나타냅니다.

문법(Syntax)

animation-delay : time | inherit;

속성(Property)

속성값 설명
time 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간을 설정합니다.

Sample1

클릭하면 시간차를 0.1초를 주어 시간차 애니메이션을 구현한 animation delay 예제입니다.

결과
delay1
delay2
delay3
delay4
delay5
CSS
.delay1 {animation: move1 3s 0.1s 10 ease}
.delay2 {animation: move1 3s 0.2s 10 ease}
.delay3 {animation: move1 3s 0.3s 10 ease}
.delay4 {animation: move1 3s 0.4s 10 ease}
.delay5 {animation: move1 3s 0.5s 10 ease} 

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

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

참고(Reference)

  • MDN
  • CSS Animations

AD

comments