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);
}
}
위 빨간색 라인이 애니메이션 플레이 후 마지막 자리에 멈추게 하는 설정이다.
반응형