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

Z时代
2024-01-10
分类：技术分享

如下所示，鼠标移入时有动画过渡，但是鼠标移出时直接恢复到初始状态。
请问能否通过纯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;}