css3 animation动画如何运动到一半之后回退呢？

Question

效果在这里：https://jsfiddle.net/23df9ahy/

$(".yuan").hover(function(){
   $(this).addClass("effect");
},function(){
   $(this).removeClass("effect");
});

通过hover事件控制动画，
动画的执行是三秒，如果hover不到三秒的情况下如何让他自动回退呢？