FSCSS animation example

This example demonstrates a concise animation technique using FSCSS. Let's compare standard CSS animation with the FSCSS approach.

Standard CSS Animation:

The HTML is simple:

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

The CSS uses @keyframes to define the animation:

<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>

This creates an animation where both the <h1> and <div> elements transition from a red, zero-sized square to a blue, 150px square.

FSCSS Animation:

FSCSS offers a more compact syntax. Here's the FSCSS equivalent:

<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>

The $(...) syntax encapsulates the @keyframes declaration, applying it to both <h1> and <div>. The %2(width, height[: ...]) is a shorthand for setting both width and height properties simultaneously.

CodePen Example:

The provided CodePen link (https://www.php.cn/link/dd32c0fc8172acd5312c1089a5aa4d33) visually demonstrates the animation's effect. This allows you to see the animation in action and compare the brevity of the FSCSS code. The animation shows a smooth transition between the red and blue squares.

The above is the detailed content of FSCSS animation example. For more information, please follow other related articles on the PHP Chinese website!