html动画效果结束返回,如何让元素在CSS动画结束后立即回到初始位置？

#bubble_1_{

-webkit-animation: bubble1 10s forwards linear infinite;

}

@-webkit-keyframes bubble1{

0%{

-webkit-transform: translate(0px,0px);

}

5%{

-webkit-transform: translate(1px,10px);

}

10%{

-webkit-transform: translate(-1px,20px);

}

15%{

-webkit-transform: translate(1px,30px);

}

20%{

-webkit-transform: translate(-1px, 40px);

}

25%{

-webkit-transform: translate(10px,45px);

}

30%{

-webkit-transform: translate(20px,50px);

}

35%{

-webkit-transform: translate(30px,49px);

}

40%{

-webkit-transform: translate(40px, 51px);

}

45%{

-webkit-transform: translate(50px,48px);

}

50%{

-webkit-transform: translate(60px,51px);

}

55%{

-webkit-transform: translate(70px,49px);

}

60%{

-webkit-transform: translate(80px, 51px);

}

65%{

-webkit-transform: translate(90px,48px);

}

70%{

-webkit-transform: translate(100px,51px);

}

75%{

-webkit-transform: translate(110px,49px);

}

80%{

-webkit-transform: translate(120px, 51px);

}

85%{

-webkit-transform: translate(130px,71px);

}

90%{

-webkit-transform: translate(131px,100px);

}

95%{

-webkit-transform: translate(129px,120px);

}

100%{

-webkit-transform: translate(131, 140px);

}

}

但是，当涉及到结束，我可以看到它回到它的初始位置。这很奇怪，因为100％和0％之间的转换应该立刻发生，对吧？我需要这种行为，我不希望它被看到回归。

有谁知道我该怎么办？我尝试了'前锋'和'后退'，但这不起作用。

2015-03-03

kasijus

+0

你能提供一个jsfiddle吗？ –

2015-03-03 12:23:35