목차
animation-delay 예제 - 2초 후 animation 재생
animation-delay 정의
animation-delay 구문
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>
결과보기
주소 복사
랜덤 이동