Question

我在使用Webkit动画方面遇到了一些麻烦。我希望动画在用户翻转时以一种方式播放，而在播出时则以另一种方式播放。简单没有？显然不适合我。

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

显然我做了一些挖掘，发现他们称之为填充模式的小minx。怪异的-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>

Answer 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

Answer 2

因此，经过一些搜索，我们发现实际上有一个小错误会阻止填充模式与background-position一起工作。这使它完全停止工作。您可以使用我的jsfiddle测试这个，只需添加一个过渡而不是背景位置。希望很快得到修复。

简而言之......

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

Answer 3

实际上今天晚上我正在处理一个类似的问题，想要让其中一个3D圆形转盘在以下情况下单向旋转：悬停在一个方面，而在另一个方向时：悬停在另一个方向上。

经过一次又一次的讨厌，倾注了w3c规格之类的东西，我开始理解为什么它不能完全按照这种方式工作，但是在解决这个小CSS难题的过程中，我可能会遇到一个问题。想你的情况。

某事：悬停#themovingthing {} 事情：不是（：悬停）#themovingthing {}

我会做一个样本，但是在接下来的72小时内我还要做更多的事情，但是当我沿途看到这个问题时，我认为我会在那里抛出基本线索。

在转动旋转木马位置BTW，我最终使用额外的DIV用于另一个旋转方向以保持纯CSS，因为无论出于何种原因，这个问题的逻辑方法在相同的重叠选择器上下文中都不会很好包括我在内的人似乎都是为了拍摄。

Webkit动画停止和反转

3 个答案: