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

Question

效果在这里：https://jsfiddle.net/23df9ahy/$(".yuan").hover(function(){    $(this).addClass("effect"); },function(){    $(this).removeClass("effect"); });通过hover事件控制动画，动画的执行是三秒，如果hover不到三秒的情况下如何让他自动回退呢？