CSS

CSS3 animation 끝에 정지

먹세 2013. 11. 21. 11:43

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);

}

}


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






반응형