목차
- animation 예제 - animation 속성 설정
- animation 정의
- animation 구문
animation 예제 - animation 속성 설정
<style>
#hz {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: aaa 1s infinite; /* Safari*/
animation: aaa 1s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes aaa {
from {left: 0px;}
to {left: 200px;}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes bbb{
from {top: 0px;}
to {top: 200px;}
}
@keyframes aaa {
from {left: 0px;}
to {left: 200px;}
}
@keyframes bbb {
from {top: 0px;}
to {top: 200px;}
}
</style>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.getElementById("hz").style.WebkitAnimation = "bbb 4s 2"; // Safari
document.getElementById("hz").style.animation = "bbb 4s 2";
}
</script>
<div id="hz"></div>
결과보기
animation 정의
CSS animation 속성 설정/반환.
animation 구문
[반환]
object.style.animation
[설정]
object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"
[속성값]
CSS animation 속성 참고.