Question

我已经在这里工作了几个小时，我已经在网上查了一下，我发现了一些有帮助的东西，但我似乎无法得到我追求的结果。

我正在尝试使用css动画制作一个简单的游戏。我已经将屏幕拆分成9行等于3的div。我希望你从中间区块开始，当你点击另一个div中的按钮时，你的“船”会转到那个div并停留在那里，直到点击另一个按钮

我设法让船移动但是，当我尝试向它添加旋转以使其具有实际飞机的“滚动”效果时，它会在设定的旋转度上俯冲动画。我希望游戏沿着z轴滚动以获得伪3D外观。有点像旧的自上而下的垂直滚动射击游戏，除了3D-ish。

animation-name : cssAnimation;
   animation-duration : 1s;
   animation-iteration-count : 1;
   animation-timing-function : ease;
   animation-fill-mode :;
   -webkit-animation-name : cssAnimation;
   -webkit-animation-duration : 1s;
   -webkit-animation-iteration-count : 1;
   -webkit-animation-timing-function : ease;
   -webkit-animation-fill-mode :;
   -ms-animation-name : cssAnimation;
   -ms-animation-duration : 1s;
   -ms-animation-iteration-count : 1;
   -ms-animation-timing-function : ease;
   -ms-animation-fill-mode :;
}
@-webkit-keyframes cssAnimation {
   0% {
       -webkit-transform: rotate(0deg) scale(1) skew(0deg) translateX(0%);
   }
   75% {
       -webkit-transform: rotate(15deg) scale(1) skew(0deg) translateX(-225%);
   }
   100% {
       -webkit-transform: rotate(0deg) scale(1) skew(0deg) translateX(-225%);
   }
}

http://jsfiddle.net/ryanhagz/5GAX7/

Answer 1

   @-webkit-keyframes cssAnimation {
       0% {
           -webkit-transform: scale(1) skew(0deg) translateX(0%);
       }
       50% {
           -webkit-transform: scale(1) skew(0deg) translateX(-225%) rotate(0deg) rotate(90deg) rotate(180deg);
       }
  100% {
           -webkit-transform: scale(1) skew(0deg) translateX(-225%);
       }
   }

我尝试编辑你的代码，我希望这将是你进一步前进的线索。

jsfiddle edit

还可以看到重启动画 here

Answer 2

您需要做的是实际更改动画定义中的时间和规则。首先，如果动画中没有更改属性，则无需声明它，因此可以在定义中省略skew和scale等属性。

此外，您应将代码重新安排到：

-webkit-animation: cssAnimation 1s cubic-bezier(.13,.38,.12,.97);
-ms-animation: cssAnimation 1s cubic-bezier(.13,.38,.12,.97);
animation: cssAnimation 1s cubic-bezier(.13,.38,.12,.97);

在代码中，我删除了未声明的规则（fill-mode）以及您拥有默认号码的规则。顺便提一下iteration-count。最后我重新排序了它们，因为没有前缀应该是最后的。如果您不知道，大多数浏览器会以这样的方式解析CSS，即他们可以解释的最后一条规则将是他们将遵守的规则。例如，在谷歌浏览器29中，未加前缀的版本可能会起作用，因为它是标准版本，但由于您之后拥有-webkit- CSS，因此Chrome解析器将使用-webkit-。每当你编写以供应商为前缀的CSS时，请记住这一点。

我将功能的时间更改为立方贝塞尔时序，这使我看起来好一些。我过去常常使用时间的网站由Lea Verou制作，您可以use it尝试其他时间。

最后，我将定义从之前的内容更改为：

@-webkit-keyframes cssAnimation {
    0%   { -webkit-transform: rotate(0deg) translateX(0%);    }
    25%  { -webkit-transform: rotate(-15deg);                 }
    100% { -webkit-transform: rotate(0deg) translateX(-225%); }
}

上面只是-webkit-版本以节省空间，但其他版本只是以正确的前缀为前缀。我所做的是告诉动画首先旋转船，然后将其发送到目的地并同时旋转回来。计时功能使它看起来在开始时非常快，在结束时更慢。如果你想稍微延迟旋转并让它在此之前开始移动，你只需要在开始旋转之前插入一些翻译，这只是在动画定义中插入更多断点的问题。

最终的CSS位于this fiddle。

我希望我的回答有助于解释我所做的一切。玩得开心！

使用/ Javascript问题的Css动画

2 个答案: