html鼠标移过元素会动,【CSS】css3 的animation,在鼠标移入时有过渡动画，如何实现鼠标移出时也有过渡动画？...

如下所示，鼠标移入时有动画过渡，但是鼠标移出时直接恢复到初始状态。

请问能否通过纯css的方法，在鼠标移出时也有过渡效果？

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

回答：

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

}

回答：

css3给元素本身添加动画