乱数を生成し、回転値の代わりにここで使用される変数として出力する JS コードがあります。
@-webkit-keyframes rotate {
0% {-webkit-transform: rotate(-10deg);}
100% {-webkit-transform: rotate(10deg);}
}
#dog{
/*irrelevant settings*/
-webkit-animation: rotate 5s infinite alternate ease-in-out;
}
上記のコードは正常に動作しますが、javascript から変数を貼り付けようとすると、rotate(variable);
動作しません。私はこれに慣れていないので、変数の構文が正しくないことを90%確信しています(真剣に、括弧、引用符、波線などが必要かどうかを思い出すのが苦手で、考えられるすべてを試しました) .
または、変数が関数に対してローカルであり、CSS がそれを読み取れないことが原因である可能性があります。
したがって、基本的には、正しい構文と、可能であればCSSに変数を読み取らせる方法を教えてくれる、見知らぬ人が必要です。
それ以外の場合は、次の全体を作成する関数が必要になるようです。
@-webkit-keyframes rotate {
0% {-webkit-transform: rotate(-10deg);}
100% {-webkit-transform: rotate(10deg);}
}
...確率変数は複数のcss要素に適用される可能性が高いため、これは少し面倒かもしれません。
ああ、現在、変数はdeg
数値の後に を含めるようにフォーマットされているため、問題はありません。実際、簡単にするために、var dogValue = "20deg"; を使用していると仮定してください。ランダムな要素を忘れてください。
ありがとう。