Webkit 动画停止和反转答案

【问题标题】：Webkit animation stop and reverseWebkit 动画停止和反转
【发布时间】：2013-07-30 01:59:50
【问题描述】：

我在使用 Webkit 动画时遇到了一点问题。我希望动画在用户翻身时以一种方式播放，而在他们推出时以另一种方式播放。简单不？显然不适合我。

http://jsfiddle.net/hornerlas/xFhkm/16/ - 这是小提琴。

显然，我进行了一些挖掘，发现了他们称之为填充模式的小妖精。奇怪的是-webkit-animation-fill-mode：转发；不适合我。我知道已经有一些关于此的问题，但如果我找到一个好的问题，我不会发布它。

我宁愿不在 JS 中解决这个问题，但目前看来这是显而易见的解决方法。

谢谢大家，如果您只想看代码……就在这里。

CSS

 .hi {
      width: 171px;
      height: 171px;
      background-image: url([URL]);

      -webkit-animation: play .3s steps(6) 1;
      -moz-animation: play .3s steps(6) 1;
      -ms-animation: play .3s steps(6) 1;
      -o-animation: play .3s steps(6) 1;
      animation: play .3s steps(6) 1;
  }

  .hi:hover
  {
     -webkit-animation-play-state:running;
     -webkit-animation-direction: reverse; 
  }

  @-webkit-keyframes play {
     from { background-position:    0px; }
       to { background-position: -1026px; }
  }

  @-moz-keyframes play {
     from { background-position:    0px; }
       to { background-position: -1026px; }
  }

  @-ms-keyframes play {
     from { background-position:    0px; }
       to { background-position: -1026px; }
  }

  @-o-keyframes play {
     from { background-position:    0px; }
       to { background-position: -1026px; }
  }

HTML

<div class="hi"></div>

【问题讨论】：

标签： css animation webkit css-animations

【解决方案1】：

并不完美，但它确实有效

    .hi {
    width: 171px;
    height: 171px;
    background-image: url("http://www.samhorner.co.uk/images/locqicomingsoon.png");

    -webkit-animation: play 3s;/* i think you have some wrong in its value */
       -moz-animation: play 3s;
        -ms-animation: play 3s;
         -o-animation: play 3s;
            animation: play 3s;

    -webkit-animation-fill-mode:forwards;
   -webkit-animation-play-state:paused;/* pause when initialize */
}

.hi:hover
{
   -webkit-animation-play-state:running;
   -webkit-animation-direction: reverse; 
}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -1026px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

语法

animation: name duration timing-function delay iteration-count direction;

在此处阅读更多信息Animation

【讨论】：

对我来说，这只是像旋转木马一样滚动图像，这不是我想要获得的效果。它应该看起来像一个动画序列，因此是 step(6) 函数。不过感谢您的观看。
更接近，但需要向前播放一次，然后在用户滚动时向后播放一次。就像按钮上的简单翻转状态一样。

【解决方案2】：

所以在做了一些搜索之后，我们发现实际上有一个小错误会阻止填充模式与背景位置一起工作。这会使其完全停止工作。您可以使用我的 jsfiddle 进行测试，只需添加一个转换而不是背景位置。希望它很快得到修复。

总之...

由于背景原因，有一个错误阻止了这种情况的发生位置。
如果您需要此效果，请使用 Javascript。

【讨论】：

【解决方案3】：

实际上，今天晚上我正在解决一个有点类似的问题，希望有一个 3D 圆形旋转木马，当 :hover 悬停在一件事上时，它会以一种方式旋转，而当 :hover 在另一件事上时，它会向另一个方向旋转。

在与这头野兽一圈又一圈地翻阅 w3c 规范之类的东西之后，我开始明白为什么它不能完全那样工作，但在解决这个小 CSS 难题的过程中，我可能遇到了一个考虑到你的情况。

something:hover #themovingthing {} something:not(:hover) #themovingthing {}

我会做一个样本，但在接下来的 72 小时内我还有很多事情要做，但是当我一路阅读这个问题时，我想我会把基本线索扔在那里。

顺便说一句，在旋转轮播位中，我最终为另一个旋转方向使用了一个额外的 DIV 以保持纯 CSS，因为无论出于何种原因，这个问题的逻辑方法在每个人都相同的重叠选择器上下文中不会很好包括我自己似乎都在为之奋斗。

【讨论】：