목차
animationDelay 예제 - CSS animation-delay 속성 설정 animationDelay 정의 animationDelay 구문
animationDelay 예제 - CSS animation-delay 속성 설정
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: hzmove 5s infinite; /* Chrome, Safari, Opera */
-webkit-animation-delay: 10s; /* Chrome, Safari, Opera */
animation: hzmove 5s infinite;
animation-delay: 10s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes hzmove {
from {left: 0px;}
to {left: 200px;}
}
@keyframes hzmove {
from {left: 0px;}
to {left: 200px;}
}
</style>
<button onclick="homzzang ()">클릭</button>
<script>
function homzzang () {
document.getElementById("hz ").style.WebkitAnimationDelay = "3s"; //Chrome, Safari, Opera
document.getElementById("hz ").style.animationDelay = "3s";
}
</script>
<div id="hz "></div>
결과보기
animationDelay 정의
CSS animation-delay 속성 설정/반환.
animationDelay 구문
반환
object .style.animationDelay
설정
object .style.animationDelay = "time |initial|inherit"
[속성값]
CSS animation-delay 속성 참고.
