css3 的animation,在鼠标移入时有过渡动画，如何实现鼠标移出时也有过渡动画？

Question

如下所示，鼠标移入时有动画过渡，但是鼠标移出时直接恢复到初始状态。
请问能否通过纯css的方法，在鼠标移出时也有过渡效果？

↓点击查看运行结果
https://jsfiddle.net/0kgx3rLz

利用css3中animation的steps(n)，将这几张图做成类似gif图的效果
···css

div{
  width:84px;
  height:80px;
  background:url(http://www.uc.cn/images1_4/sprite_uc_android.png);
}

div:hover{
  animation: myMove steps(11) .6s forwards;
}

@keyframes myMove{
    100%{background-position: -1100px;}
}

···

熊猫桑的代码可以实现鼠标移出时有过渡效果，但是我发现一个问题：

用animation时，鼠标快速移入移出不会有bug，

但是用transition时，在动画还没结束之前鼠标快速移入移出，会有bug

Answer 1

用transition嘛。

上代码：

div{
  width:84px;
  height:80px;
  background:url(http://www.uc.cn/images1_4/sprite_uc_android.png);
  transition: background-position .6s steps(11);
}

div:hover{
  background-position: -1100px;
}

Answer 2

css3给元素本身添加动画