animationDirection 예제
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: hzmove 5s infinite; /* Chrome, Safari, Opera */
animation: hzmove 5s infinite;
}
/* 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.WebkitAnimationDirection = "reverse"; // Chrome, Safari, and Opera
document.getElementById("hz ").style.animationDirection = "reverse";
}
</script>
<div id="hz "></div>
결과보기
정의
.
기본값:
반환값: 를 나타내는 문자열
CSS속성:
브라우저 지원.
구문
[접근]
[설정]
[속성값]
