FSCSSアニメーションの例

この例は、FSCSを使用した簡潔なアニメーション手法を示しています。 標準のCSSアニメーションをFSCSSアプローチと比較しましょう

標準CSSアニメーション：

htmlは簡単です：

<code class="language-html"><h1></h1>
<div></div></code>

CSSは

を使用してアニメーションを定義します：@keyframes

<code class="language-css">h1, div {
  animation: change 3s linear infinite;
}

@keyframes change {
  0% {
    background: red;
    width: 0;
    height: 0;
  }
  100% {
    background: #00f;
    width: 150px;
    height: 150px;
  }
}</code>

これにより、

と<h1>の両方の要素が赤のゼロサイズの正方形から青、150pxの正方形に移行するアニメーションが作成されます。 <div>

fscssアニメーション：

FSCSSは、よりコンパクトな構文を提供します。 これがFSCSSに相当するものです：

<code class="language-css">$(@keyframes h1, div &[3s linear infinite]) {
  0% {
    background: red;
    %2(width, height[: 0;])
  }
  100% {
    background: #00f;
    %2(width, height[: 150px;])
  }
}</code>

構文は

宣言をカプセル化し、それを$(...)と@keyframesの両方に適用します。 <h1>と<div>の両方のプロパティを設定するための速記です。%2(width, height[: ...]) widthheightcodepen例：

提供されたCodepenリンク（https://www.php.cn/link/dd32c0fc8172acd5312c1089a5aa4d33）は、アニメーションの効果を視覚的に示しています。 これにより、動作中のアニメーションを確認し、FSCSSコードの簡潔さを比較できます。 アニメーションは、赤と青の正方形の間の滑らかな遷移を示しています。

以上がFSCSSアニメーションの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。