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

Question

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

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

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

Answer 1

这样？
demo

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

https://codesandbox.io/s/si-f...

上边是demo，可以实现你的方案。如果是更加复杂的需要 animation 每个时间分段设置，之后做到回退也同样支持。
详情可看（宣传）https://github.com/JianTin/sw...