0

我在使用 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>
4

3 回答 3

0

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

简而言之...

  • 由于背景位置，有一个错误阻止了这种情况的发生。
  • 如果您需要此效果，请使用 Javascript。
于 2013-07-30T16:55:19.177 回答
0

不完美但有效

    .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;

在这里阅读更多动画

于 2013-07-30T04:52:48.113 回答
0

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

在与野兽进行了一轮又一轮之后，倾注了 w3c 规范之类的东西后，我开始理解为什么它不能完全那样工作，但是在解决那个小 CSS 难题的过程中，我可能已经想到了你的想法情况。

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

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

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

于 2013-09-17T11:13:46.273 回答