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