[animation] CSS - animation-delay 속성 - 애니지연시간 (= 작동지연시간 = 작동대기시간 = 작동준비시간 = 애니메이션딜레이속성, IE10)

1. animation-delay 예제 - 2초 후 animation 재생
2. animation-delay 정의
3. animation-delay 구문
4. animation-delay 예제 - 2초 지점부터 animation 재생

animation-delay 예제 - 2초 후 animation 재생 

 

<style> 

div {

  width: 100px;

  height: 100px;

  background: blue;

  position: relative;

  -webkit-animation: homzzang 5s infinite; /* Safari 4.0 - 8.0 */

  -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */

  animation: homzzang 5s infinite;

  animation-delay: 2s;

}

/* Safari 4.0 - 8.0 */

@-webkit-keyframes homzzang {

  from {left: 0px;}

  to {left: 200px;}

}

@keyframes homzzang {

  from {left: 0px;}

  to {left: 200px;}

}

</style>

<p>2초 후 이동 시작</p>

<div></div>

 

결과보기

animation-delay 정의

 

애니메이션 시작 지점 지정.

(속성값 단위: s: 초, ms: 밀리초)

 

---

 

1.

• 기본값: 0s
• 상속여부: X
• 애니효과: X
• CSS버전: CSS3
• JS구문: object.style.animationDelay="1s"

 

2.

IE10 이상 주요 최신 브라우저 지원.

일부 구형 브라우저 경우, -webkit-, -moz-, -o- 접두어 필요.

 

3.

MDN animation-delay 예제 보기

 

animation-delay 구문

 

selector {animation-delay: time|initial|inherit;}

 

---

[속성값]

 

time

선택. 애니메이션 시작 전 대기시간.

• 사용단위: (초: s) 또는 (밀리초: ms) 
• 기본값: 0
• 음수 값 사용하면 해당 시간만큼 이미 재생된 것처럼 시작.

 

initial

이 속성의 기본값으로 설정.

inherit

부모요소 속성값 상속. 

 

animation-delay 예제 - 2초 지점부터 animation 재생

 

<style> 

div {

  width: 200px;

  height: 100px;

  background: tomato;

  position: relative;

  animation: hz 5s 1;

  animation-delay: -2s;

}

@keyframes hz {

  from {left: 0px;}

  to {left: 200px;}

}

</style>

<div>홈짱닷컴 Homzang.com</div>

 

결과보기