Exemple d'animation FSCSS

Cet exemple démontre une technique d'animation concise utilisant FSCSS. Comparons l'animation CSS standard avec l'approche FSCSS.

Animation CSS standard :

Le HTML est simple :

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

Le CSS utilise @keyframes pour définir l'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>

Cela crée une animation où les éléments <h1> et <div> passent d'un carré rouge de taille nulle à un carré bleu de 150 px.

Animation FSCSS :

FSCSS propose une syntaxe plus compacte. Voici l'équivalent 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>

La syntaxe $(...) encapsule la déclaration @keyframes, en l'appliquant à la fois à <h1> et à <div>. Le %2(width, height[: ...]) est un raccourci permettant de définir simultanément les propriétés width et height.

Exemple CodePen :

Le lien CodePen fourni (https://www.php.cn/link/dd32c0fc8172acd5312c1089a5aa4d33) démontre visuellement l'effet de l'animation. Cela vous permet de voir l'animation en action et de comparer la brièveté du code FSCSS. L'animation montre une transition douce entre les carrés rouges et bleus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!