CSS3 animation 끝에 정지

css3 animation 을 사용하다 보면 애니메이션 플레이 후에 그 자리에 멈추게 하고 싶은 경우가 있다.

그러나 아무 설정을 하지 않으면 처음위치로 돌아오게 되어있다.

이럴때 사용하는 설정을 알아보자.

#div1 {

position:relative;

left:0;

top:0;

width:100px;

height:100px;

background:red;

-webkit-transform:scale(2);

}

.move1 {

-webkit-animation-name : animation_play1;

-webkit-animation-duration : 2s;

-webkit-animation-timing-function:linear;

-webkit-animation-delay:.3s;

-webkit-animation-iteration-count:1;

-webkit-animation-fill-mode:both

}

@-webkit-keyframes animation_play1 {

0% {

-webkit-transform : translateX(0px) translateY(0px) scale(2.5);

}

100% {

-webkit-transform : translateX(100px) translateY(100px) scale(1);

}

}

위 빨간색 라인이 애니메이션 플레이 후 마지막 자리에 멈추게 하는 설정이다.