9

cssファイルでキーフレームを定義するためのこの種の構文があります。

@-webkit-keyframes fade {
    from {opacity: 1;}
    to {opacity: 0.25;}
}

そして私たちはそれを次のように参照します：

.foo {
    -webkit-animation: fade 1s linear infinite;
}

次のように、インライン化する方法はありますか？

.foo {
    -webkit-animation: (from {opacity: 1;} to {opacity: 0.25;}) 1s linear infinite;
}

それを行う方法、または実行時に「@ -webkit-keyframes」要素をスタイルシートに挿入する方法はありますか？

ありがとう

4

1 に答える 1

6

W3C CSS Animations WDを見ると、animation省略形プロパティの構文は次のとおりです。

[<animation-name> || <animation-duration> || <animation-timing-function> || 
 <animation-delay> || <animation-iteration-count> || <animation-direction> || 
 <animation-fill-mode>] [, [<animation-name> || <animation-duration> ||
 <animation-timing-function> || <animation-delay> || <animation-iteration-count> ||
 <animation-direction> || <animation-fill-mode>] ]*

つまり、アニメーションのプロパティ値を提供するキーフレームat-ruleを選択するために使用されるものだけが必要でanimation-nameあり、その後に、これらのルールの実行方法を定義する他のパラメーターが続きます。

現在、インラインキーフレームのルールを定義できるようにするための簡略構文は仕様に定義されていませんanimation-name。プロパティを使用して既存のキーフレームを参照する必要があります。スペックから：

'animation-name'プロパティは、適用されるアニメーションのリストを定義します。それぞれの名前は、アニメーションのプロパティ値を提供するキーフレームのルールを選択するために使用されます。名前がどのキーフレームのルールとも一致しない場合、アニメーション化するプロパティはなく、アニメーションは実行されません。

于 2013-01-19T01:05:50.890 に答える