2017-01-12 11 views
0

私は基本的なバウンシングアイコンを試してみたいと思っていましたが、バウンスが見えていないのですが、なぜ(CSSのアニメーション用にchrome/FF devツールの機能はありますか?私は各ブラウザプレフィックスのキーフレームを宣言し、完了しました:キーフレームアニメーションが実行されていない - 何が欠けていますか?

animation: bounce 2s infinite; 
-webkit-animation: bounce 2s infinite; 
-moz-animation: bounce 2s infinite; 
-o-animation: bounce 2s infinite; 

他に何がありますか? https://jsfiddle.net/p0n5dL59/

+1

自体はそれほどアニメーション化する何を想定している元の要素....を変える*何も*を持っていないアニメーションだ

@keyframes animation-name { to { color: red; } } 

のように、アニメーションで何が起こるかを定義する必要がありますか?アニメーションが見られるようにするために、CSSは*何か*色、サイズ、位置などを変更する必要があります。あなたはそれを持っていません。 – Scott

+0

ああ、私は見る!まあ、私には不在です。 – Escher

答えて

3

@keyframesで定義したアニメーションプロパティは、アニメーションが適用される要素に進む必要があります。その後@keyframesはここで参照https://css-tricks.com/snippets/css/keyframe-animation-syntax/

+1

@keyframesバウンス{ アニメーションの時間:1秒; アニメーションタイミング機能:簡単。 アニメーション遅延:0秒。 アニメーションの方向:正常; アニメーション塗りつぶしモード:なし; アニメーション反復回数:無限; アニメーション再生状態:実行中。 アニメーション名:バウンス; } 'はアニメーションプロパティの束です。アニメーションを適用する要素の下にあります。代わりに、この '@ keyframes' CSSには、アニメーションに必要なものが含まれていなければなりません。例えば、' 0%{top:-5px; } 50%{top:0; } 100%{top:-5px;} }または何かが "バウンス"効果を作ります。 –

+0

これは、ありがとう、ありがとう。 – Escher

関連する問題