2

子供向けのウェブサイトをセットアップする必要があり、ホバーまたはオンクリックでアニメーション化する画像をいくつか用意したいと思います（CSSのみ、楽しみのために、私はすでにJSでそれを行う方法を知っています）。ディズニーのゲームを見たことがありますか？メニューは実際にはありません。いくつかの画像 (カレンダーや引き出しなど) があるだけで、それらにアクセスするとアニメーションが表示されます。私は女の子のイメージを持っています (すべての絵はコミック スタイルです)。彼女にカーソルを合わせると、女の子が挨拶してくれます。次に、アニメーションはさまざまなステップに分割されます。1) 腕が下に置かれ、机によって隠されます。女の子、前腕、手 (および腕の最後の部分) の 3 つのイメージがあります。2) ホバー！前腕が上に動きます。たとえば、85 ～ 90 度です。3) 前腕は停止しますが、残りの腕と手は動き続けます (左、右、左、右、および再び)。考えてみてください。

現時点では、女の子を一度だけ動かすことができます (腕全体が上に動きますが、それは私が望むほど自然ではありません)。必要な複数のアニメーションを実現するにはどうすればよいですか?

どうもありがとうございました！

Ps 私はこれをすべてのブラウザーで快適にしたくはありません。webkit+mozilla だけです。IE は気にしません。

編集：

時間の経過に伴う複数の遷移はどうですか? 「translate(0,4em)」と x 秒後に「rotate(50deg)」のようなものですか?

4

1 に答える 1

1

純粋な CSS を使用して何かを達成するために @keyframes を見ることを検討するかもしれませんが、ブラウザのサポートによって制限されることに注意してください。caniuse.com をチェックして、内訳が何であるかを確認してください。それ以外の場合は、多くの javascript、スプライト、および CSS を使用してプログラミングを検討しています。Flashも常にオプションですが、人気のあるものではありませんが、あなたが説明するようなゲームサイトでよく見られるものです.

したがって、CSS では次のようになります。

//webkit only here:
@-webkit-keyframes fade-in {
0% {
    -webkit-transform: ease-in-out(0);
opacity: 0;
}
50% {
    opacity: 0;
}
100% {
 -webkit-transform: ease-in-out(1);
opacity: 1;
}
}

#el{
-webkit-animation-duration: 1.5s;
-webkit-animation-name: fade-in; 

}
于 2012-06-16T16:17:05.293 に答える