animationName 예제
<style>
#hz {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: hzmove 2s infinite; /* Chrome, Safari, Opera */
animation: hzmove 2s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes hzmove {
from {left: 0px;}
to {left: 200px;}
}
@keyframes hzmove {
from {left: 0px;}
to {left: 200px;}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes hzmove2 {
from {width: 0px;}
to {width: 300px; background: blue;}
}
@keyframes hzmove2 {
from {width: 0px;}
to {width: 300px; background: blue;}
}
</style>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.getElementById("hz").style.WebkitAnimationName = "hzmove2"; // Chrome, Safari, and Opera
document.getElementById("hz").style.animationName = "hzmove2";
}
</script>
<div id="hz"></div>
결과보기
animationName 정의
@keyframes 애니메이션의 이름 설정/반환
1.
기본값: none
CSS속성: animation-name
CSS버전: CSS3
2.
IE10 이상 주요 최신 브라우저 모두 지원.
animationName 구문
[반환]
object.style.animationName
[설정]
object.style.animationName = "속성값"
[속성값]
none
기본값. 애니메이션이 없음 지정.
캐스케이드 (cascade: CSS우선순위)에서 오는 애니메이션을 재정의하는 데 사용 가능.
keyframename
선택기에 바인딩 할 키프레임 이름 지정.
initial
이 속성의 기본값을 설정.
inherit
부모요소 속성값 상속.
[반환값]
요소의 animation-name 속성 나타내는 문자열.
