0

私は現在、div が後方に沈むように見えるアニメーションを作成しようとしています。その後、(フォールバックが終了した後) 左に押し出されます。

私は現在 CSS3 を使用していますが、アニメーション プロパティにあまり慣れておらず、いくつかの問題を抱えています。現在私は使用しています：

@-webkit-keyframes sinkBack
{
    50% {
        -webkit-transform: scale(.9);
        margin-left: 0;
    }
    100% {
        margin-left: -100px;
    }
}

ただし、この結果、スケールダウンし、50% を過ぎると、左に押し出しながらスケールアップを開始します。左に押しながらスケール（.9）のままにしたいのですが。

jQuery でこれを行うこともできますが、animate は変換をサポートしていないため、これらのアニメーションを有効にするプラグインのいずれかを使用したくありません。そのため、CSS3 の方が適していると感じました。

編集

gion の助けに感謝します。以下の最終的なコード (margin-left を切り替えます):

@-webkit-keyframes sinkBack /* Safari and Chrome */
{
50% {
    -webkit-transform: scale(.9);
}
100% {
    -webkit-transform: translateX(-100px) scale(.9);
}
}
4

1 に答える 1

1

スケールを維持する:

@-webkit-keyframes sinkBack
{
    50% {
        -webkit-transform: scale(.9);
        margin-left: 0;
   }
    100% {
       -webkit-transform: scale(.9);
        margin-left: -100px;
    }
}
于 2012-12-22T09:12:49.243 に答える