2

実行中に反転させたい単純な CSS3 キーフレーム アニメーションがあります。ここのコードを参照してください: http://jsfiddle.net/breizo/EUVAv/

@-webkit-keyframes transform-keyframes {
0%      {-webkit-transform:translateX(0px) translateY(0px) rotate(270deg);}
25%     {-webkit-transform:translateX(200px) translateY(0px) rotate(270deg);}
25.01%  {-webkit-transform:translateX(200px) translateY(0px) rotate(0deg);}
50%     {-webkit-transform:translateX(200px) translateY(200px) rotate(0deg);}
50.01%  {-webkit-transform:translateX(200px) translateY(200px) rotate(90deg);}
75%     {-webkit-transform:translateX(0px) translateY(200px) rotate(90deg);}
75.01%  {-webkit-transform:translateX(0px) translateY(200px) rotate(180deg);}
100%    {-webkit-transform:translateX(0px) translateY(0px) rotate(180deg);}
}

アニメーションが現在のキーフレーム以外のキーフレームにジャンプするのを防ぐトリックを持っている人はいますか? デュレーションの 1/2 に対称なキーフレームにジャンプしているように見えます。

どんな入力でも大歓迎です。

4

2 に答える 2

1

CSS を使用して :hover に基づいて 2 つの方向に 3D カルーセル製品カタログをアニメーション化するのと同じように、私は同じようにびくびくしていました。

animation-fill-mode:forwards などの明白なアイデアをいじった結果、最終的に解決したのは、わずかな期間と変換自体をプロパティとして持つ 2 ビットのトランジション構文を混在させることでした。トランスフォームの状態をキャッチするためのトランジション チェイスの過程で、トランスフォームされる要素への更新はそのまま残り、効果は仕様に適合しているように見えるため、有効なソリューションである必要があります。

transition-duration: 0.2s;transition-property:transform;

パッドを使用しているため、タイプミスがある場合はご容赦ください。

于 2013-09-25T19:12:52.397 に答える