使用精灵

Question

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

图片1：包含烟雾的半透明图像

图片2：包含2个背景状态的精灵

当悬停按钮时，动画开始从右向左无限滚动图像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/

到目前为止一切顺利。但是现在我想让图像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/

正如你所看到的，它会慢慢地将图像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

但是如果你想让第二个背景在所有动画时间都是正确的，那就更容易了。只需在from和to关键帧中设置相同的值：

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