animationFillMode 예제
<style>
#hz {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: hzmove 2s 1; /* Chrome, Safari, Opera */
animation: hzmove 2s 2;
}
/* 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.WebkitAnimationFillMode = "forwards"; // Chrome, Safari, and Opera
document.getElementById("hz").style.animationFillMode = "forwards";
}
</script>
<div id="hz"></div>
결과보기
animationFillMode 정의
애니메이션이 재생 안 될 때 ("완료" 또는 "지연" 경우) 요소에 적용할 스타일 지정.
1.
기본적으로 CSS 애니메이션은 첫 번째 키 프레임이 "재생"될 때까지 애니메이션 적용 요소에 영향을 미치지 않으며 마지막 키 프레임이 완료되면 영향을 중지하는데, animationFillMode 속성 이용 시 이 동작을 재정의 가능.
2.
기본값: none
3.
CSS버전: CSS3
animation-fill-mode
4.
IE, Safari 최신브라우저 : 지원 X Chrome, Firefox, Opera 최신브라우저 : 지원 O
animationFillMode 구문
[반환]
object .style.animationFillMode
[설정]
object .style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
[속성값]
none
애니메이션은 실행 전후에 대상에 스타일을 적용 안 함. (기본값)
forwards
애니 종료 된 후 (애니 반복 횟수로 결정), 애니는 애니가 종료된 시간의 속성값을 적용.
backwards
애니메이션은 애니메이션 지연에 의해 정의된 기간 동안 애니메이션 첫 번째 반복을 시작하는 키 프레임에 정의된 속성값 적용하는데, 이것들은 from keyframe의 값 (애니메이션 방향이 "normal"또는 "alternate"인 경우) 또는 to keyframe의 값 (animationDirection이 "reverse"또는 "alternate-reverse 인 경우)임.
both
애니메이션이 forwards, backwards 규칙 모두를 따름. (즉, 애니메이션 속성을 양방향으로 확장.)
initial
이 속성의 기본값으로 설정.
inherit
부모요소 속성값 상속.
[반환값]
요소의 animation-fill-mode 나타내는 문자열.
주소 복사
랜덤 이동