css - 使用 Sprite 在双背景上分离 CSS 动画

Question

我有一个带有两个背景图像的按钮，并使用 background-blend-mode: overlay; 将它们混合在一起。

图 1:包含烟雾的半透明图像

图片 2:包含 2 种背景状态的 Sprite

当鼠标悬停在按钮上时，动画开始从右向左无限滚动 Image 1，给人一种烟雾穿过按钮的错觉。

<a href="#"></a>

a {
  width: 300px;
  height: 68px;

  display: block;


  background: url("http://i.imgur.com/a52FaTn.png"), url("http://i.imgur.com/pCxkS4J.jpg");
  background-repeat: repeat, no-repeat;   
  background-blend-mode: overlay;

    animation: 16s linear 0s normal none infinite paused;

  animation-name: my-animation;
}

a:hover {
 animation-play-state: running; 
}

@-webkit-keyframes my-animation { from{background-position: 0px 0px, left 0px;} to{background-position: -590px 0px, left 0px;} }
@keyframes my-animation { from{background-position: 0px 0px, left 0px;} to{background-position: -590px 0px, left 0px;} }

查看实际效果:https://jsfiddle.net/663c2tj4/1/

到目前为止一切顺利。但是现在我想让 image 2 的背景位置立即切换到右边(通常你会用常规的背景位置来做到这一点)。

a {
  width: 300px;
  height: 68px;

  display: block;

  background: url("http://i.imgur.com/a52FaTn.png"), url("http://i.imgur.com/pCxkS4J.jpg");
  background-repeat: repeat, no-repeat;   
  background-blend-mode: overlay;

  animation: 16s linear 0s normal none infinite paused, none ;

  animation-name: my-animation;
}

a:hover {
  animation-play-state: running;   
  background-position: 0 0, right 0; // Gets overwritten by animation
}

@-webkit-keyframes my-animation { from{background-position: 0px 0px, left 0px;} to{background-position: -590px 0px, right 0px;} }
@keyframes my-animation { from{background-position: 0px 0px, left 0px;} to{background-position: -590px 0px, right 0px;} }

查看实际效果:https://jsfiddle.net/8b8fku0s/2/

如您所见，它会将 Image 2 缓慢移动到右侧，而不是像我希望的那样立即移动。只使用一张图片是不可能的吗？

更新:我最终使用了不同的技术来获得我想要的结果。我使用了带有白色背景的 background-blend-mode: luminosity; 来降低图像的饱和度。

参见示例:https://jsfiddle.net/8b8fku0s/5/

Answer 1

使用中间关键帧让第二个背景瞬间移动

@keyframes my-animation { 
  from {background-position: 0px 0px, 0% 0px;} 
  49.99%{background-position: -295px 0px, 0% 0px;} 
  50%  {background-position: -295px 0px, right 0px;} 
  to   {background-position: -590px 0px, right 0px;} 
}

fiddle

但是如果你想让第二个背景在整个动画时间都在右边，那就更容易了。只需在起始和终止关键帧中设置相同的值即可:

@keyframes my-animation { 
  from {background-position:    0px 0px, right 0px;} 
  to   {background-position: -590px 0px, right 0px;} 
}