• Q&A
  • 회원가입
  • 로그인

[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>

 

결과보기

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012