帶有Javascript問題的CSS動畫

Question

我已經呆了好幾個小時了，在網上檢查了所有內容，發現有幫助的地方，但似乎無法獲得想要的結果。

我正在嘗試使用CSS動畫制作一個簡單的游戲。 我已將屏幕分成3個行，分為9個相等的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編輯

也可以在這里看到重啟動畫

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為1。 最后，我重新排序了它們，因為未打上前綴的應該是最后一個。 如果您不知道，大多數瀏覽器都會以這樣一種方式來解析CSS：他們可以解釋的最后一條規則就是他們將遵守的規則。 例如，在Google Chrome 29中，無前綴版本可能會起作用，因為它是標准版本，因此它將是一個可以使用的版本，但是由於您使用了-webkit- CSS，因此Chrome解析器將使用-webkit- 。 只要編寫供應商前綴的CSS，請記住這一點。

我將該函數的時序更改為三次貝塞爾曲線時序，這在我看來使它看起來更好一些。 我以前使用計時的網站是Lea Verou制作的，您可以使用它嘗試其他計時。

最后，我將定義從以前的內容更改為：

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

上面只是-webkit-版本以節省空間，而其他版本僅以適當的前綴作為前綴。 我所做的是告訴動畫先旋轉船，然后將其發送到目的地，然后同時旋轉回去。 計時功能使它看起來像開始時非常快，而結束時很慢。 如果要稍稍延遲一下旋轉，然后再開始旋轉，則只需在旋轉開始之前插入一些平移，這只是在動畫定義中插入更多斷點的問題。

最終的CSS在這個小提琴中 。

我希望我的回答有助於解釋我所做的一切。 有趣的動畫！