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

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

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

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

---

css:hover 当:hover触发就执行，移开就会原路返回

---

直接CSS hover不好吗，杀鸡用牛刀了

---

.yuan{
  width:50px;
  height:50px;
  border-radius:50%;
  background:red;
  transition: all 3s ease;
}
.yuan:hover {
  -webkit-transform: scale(3)
}

---

你这个完全不需要animation,transform+transition就行了

---

这样？
demo