javascript - 带有 Javascript 问题的 Css 动画

Question

我已经在这几个小时了，我已经在整个网络上进行了检查，并且发现了一些有用的东西，但我似乎无法得到我想要的结果。

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

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

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

您需要做的实际上是围绕动画定义中的时间和规则进行更改。首先，如果一个属性在动画中没有变化，那么就没有必要声明它，所以可以在定义中省略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 为 1。最后我对它们重新排序，因为没有前缀的应该排在最后。如果您不知道，大多数浏览器解析 CSS 的方式是它们可以解释的最后一条规则将是它们将遵守的规则。例如，在 Google Chrome 29 中，未加前缀的版本可能会工作，并且会被使用，因为它是标准版本，但由于您之后有 -webkit- CSS，Chrome 解析器将使用 -webkit-。每当您编写带有 vendor 前缀的 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 中.

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