鍍金池/ 問答/HTML5  HTML/ css3 的animation,在鼠標移入時有過渡動畫，如何實現(xiàn)鼠標移出時也有過

css3 的animation,在鼠標移入時有過渡動畫，如何實現(xiàn)鼠標移出時也有過渡動畫？

如下所示，鼠標移入時有動畫過渡，但是鼠標移出時直接恢復到初始狀態(tài)。
請問能否通過純css的方法，在鼠標移出時也有過渡效果？

↓點擊查看運行結(jié)果
https://jsfiddle.net/0kgx3rLz

sprite_uc_android.png

利用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;}
}

···

熊貓桑的代碼可以實現(xiàn)鼠標移出時有過渡效果，但是我發(fā)現(xiàn)一個問題：

用animation時，鼠標快速移入移出不會有bug，

但是用transition時，在動畫還沒結(jié)束之前鼠標快速移入移出，會有bug

回答
編輯回答
影魅

css3給元素本身添加動畫

2017年12月23日 14:36
編輯回答
呆萌傻

用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;
}
2017年8月4日 10:32