CSS秘密花园之 hover状态下的鼠标移出动画暂停而不是初始化

假设我们一个很长的景观照片，如下图所示：

但我们要显示的空间只有150px X 150px的正方形。解决这个问题的一个方法就需要使用动画：默认显示图像的从图像的左边缘开始，当用户有交互行为时，图片慢慢向左滚动(例如，鼠标悬浮在图片上时)。我们使用单个元素，并且给他设置一个背景图片，通过动画修改background-position值来实现。

<div class="panoramic"></div>

.panoramic {
    width: 150px; 
    height: 150px;
    background: url("img/naxos-greece.jpg");
    background-size: auto 100%;
}

目前，它看起来如下图所示：

没有动画和任何交互效果。我们来实战一回，我们可以看到，原来是手动的修改background-position从0 0到0 100%来修改整个背景图像。下面我们来尝试使用keyframes来做：

@keyframes panoramic {
    to {
        background-position: 100% 0;
    }
}
.panoramic {
    width: 150px; 
    height: 150px;
    background: url("img/naxos-greece.jpg");
    background-size: auto 100%;
    animation: panoramic 10s linear infinite alternate;
}

 

它能正常的运行。效果看起来就像一个全景，从左向右看。然而，而面加载动画就被触发，这样一来可能会分散用户的集中力，例如，旅游网页，用户可能会试着只专注于阅读有关于纳克索斯岛(Naxos)相关文本，而不是看着美丽的全景照片。当用户鼠标悬浮在图片上时，才触发动画，这样看起来更形象。所以，我们首先想的方案就是这样的。

.panoramic {
    width: 150px;
    height: 150px;
    background: url("img/naxos-greece.jpg");
    background-size: auto 100%;
}
.panoramic:hover,
.panoramic:focus {
    animation: panoramic 10s linear infinite alternate;
}

 

当鼠标悬浮在图片上时动画被触发：初始状态显示图像的最左边的部分，慢慢滚动显示图像的其他部分。然而，当我们的鼠标移出图像时，图像又突然跳到图像的最左边，如下图所示：

我也是无意之中发现这个问题。

为了解决这个问题，我们要想个办法来解决。我们需要的是不应用动画，这意味着:hover无法记忆动画的当前位置。我们需要的是鼠标悬浮在图片是有动画，图片从左向右移动，鼠标移出图片时，动画暂停。值得庆幸的是，动画有一个属性animation-play-state可以实现这样的效果。

因此，我们把动画的暂停状态运用在.panoramic上，而鼠标悬浮状态(:hover)时又播放动画。因为它不再是播放和取消一个动画，只是暂停和恢复现有的动画，这样动画不会有突然跳跃。最后的代码和效果如下：

.panoramic {
  width: 150px; 
  height: 150px;
  background: url("http://www.w3cplus.com/sites/default/files/blogs/2015/1507/naxos-greece-big.jpg");
  background-size: auto 100%;
  animation: panoramic 10s linear infinite alternate;
  animation-play-state: paused;
}
.panoramic:hover,
.panoramic:focus {
  animation-play-state: running;
}
@keyframes panoramic {
  to {
    background-position: 100% 0;
  }
}

 

如需转载，烦请注明出处：http://www.w3cplus.com/css3/css-secrets/smooth-state-animations.html

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/css3/css-secrets/smooth-state-animations.html © w3cplus.com