2

キーフレーム アニメーションでコンテンツ プロパティの効果が表示されない理由を知っている人はいますか? 私は何かを試しました

@-webkit-keyframes mymove {
    0.000% {-webkit-transform: matrix(1,0,0,1,294,-135);
                     color:blue;
                     content:"test";
           }
    /*... more keyframes that changed the -webkit-transform property...*/
}

divアニメーション中にアニメーション化されたHTML を見ていると、-webkit-transformとcolorプロパティの効果は確認できましたが、プロパティは確認できませんでしたcontent。contentアニメーション中にプロパティが適用されなかったかのようです。jQuery は値を返しませんでしたが$(<my animated html element>).css("content");、テストを繰り返したところ、画面上を移動するたび$(<my animated html element>).css("-webkit-transform")に異なる値が返されました。div

contentプロパティを使用して何かを表示する必要はありません。keyframeアニメーションの対応するパーセンテージを参照できるように、CSS ルールにいくつかのメタデータを保存できるようにしたいと考えています。無限ループでアニメーションを実行し、アニメーション化された HTML 要素を定期的にクエリして、アニメーション内でどのくらい進んでいるかを把握できるようにする必要があります。contentプロパティを使って任意の文字列を入れるだけでいいと思ったのですが、Chrome や Firefox ではうまくいきません。keyframeCSS ルール内にメタデータを保存する方法を知っている人はいますか?

4

2 に答える 2

0

この URL を確認してくださいhttp://msdn.microsoft.com/en-us/library/ie/jj680076(v=vs.85).aspx。この記事は Internet Explorer 9 以降で適切に機能します。IE 9 以降以外のブラウザーの場合は、css3 アニメーション キーフレームをベンダー固有のキーワークでコピー アンド ペーストする必要があります。

たとえば。クロムの場合、記事のCSSを次のように記述する必要があります。

@keyframes fadeOut {
    from {  
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.TransformDemoDivFadeOut:hover {
    animation-duration: 2s;
    animation-name: fadeOut;
    @-webkit-animation-duration: 2s;
    @-webkit-animation-name: fadeOut;
}

@-webkit-keyframes fadeOut {
    from {  
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
于 2013-09-07T06:15:57.213 に答える
0

メタデータをキーフレームに保存するときに何を言おうとしているのか完全には理解できません.とにかく、jqueryまたはjavascriptはcss3の「コンテンツ」データを読み取ることができません。また、キーフレーム内で content プロパティを使用できないと確信しています。:after または :before を使用する必要があります。例えば。

#box:before {
    content: "test";
}

アニメーションを無限に実行したい場合は、次を使用できます

-webkit-animation: mymove 5s infinite;

これがうまくいくかどうか教えてください。

于 2013-09-07T05:44:43.130 に答える