このCSS文の "@"は何を意味しますか？

Question

@-webkit-keyframes roll { 
    100% { -webkit-transform: rotate(360deg); } 
} 

"@"と "100％"とはどういう意味ですか？

Answer 1

CSS3仕様の一部として正式に承認される前に、Webkit開発チームによって定義されたCSS3ルールです。したがって、セレクタに-webkitが含まれています。 @は、これが標準セレクタではなくCSSルールであることを示します。 @ -webkit-keyframesは、CSSのビジュアルエフェクトアニメーションプロパティのキーフレームを指定するためのものです。

アニメーションで好きなだけ多くのキーフレームを定義できます。最終的なキーフレームのみを指定した場合（アニメーションの100％が完成したとき）に定義されています。例えばThe full syntax and documentation for these rules can be found here.

、あなたはゆっくりと開始して加速し、起動とスムーズに終わる一方で、あなたは回転の度に非線形のステップを持っていた中間キーフレーム設定することができますし、アニメーションを望んだ場合：

@-webkit-keyframes roll { 
    25% { -webkit-transform: rotate(24deg); 
      -webkit-animation-timing-function: ease-in; 
     } 
    50% { -webkit-transform: rotate(72deg); } 
    75% { -webkit-transform: rotate(168deg); } 
    100% { -webkit-transform: rotate(360deg); 
     -webkit-animation-timing-function: ease-out; 
     } 
} 

Answer 2

を"@"は、スタイルシートのAt-Ruleを宣言します。どのような場合でも、確かに特別な意味があります。

"100％"は、@keyframesルールで定義されたCSSアニメーションの最終状態を表します。この場合、@webkit-keyframesルールです。実際にアニメーションの最初の状態（0％）と最後の状態（100％）を宣言して、アニメーションの開始と停止をユーザーエージェントが知るようにする必要があります。

ここにもう少しです： At-Rulesはレンダリングエンジンへの指示です。通常のSelectorブロックとDeclarationブロックを超えてCSS Rule Set構文を拡張します。 At-RulesはAt-Keyword（単に "@キーワード"）で宣言され、続いて使用されるAt-Keywordに関連するAt-Rulesステートメントが続きます。例：@charset "ISO-8859-15";

オプションの引数は、At-Ruleステートメントタイプに応じてAt-Keywordの後に続くことができます。例：@media screen {color：＃000; }、screenはオプションの引数です。