🚀 Stop Writing 100 Keyframes: Meet FSCSS Shorthands

Wait, did I just see a CSS file with an array loop? 🤯

If you've ever had to build a loading progress animation, a countdown, or a complex multi-step transition in pure CSS, you know the pain. You usually end up with a CSS file that is 500 lines of repetitive @keyframes.

Enter FSCSS (Figured Shorthand Cascading Style Sheet).

The "Magic" Array ✨

In the example below, we aren't manually typing out 1%, 2%, 3%. Instead, we use a shorthand directive that the FSCSS compiler understands:

@arr numlist[count(99)]

@keyframes count {
  @arr.numlist[]% {
    content: 'ing...@arr.numlist[]%';
  } 
}

This simple syntax generates 99 keyframes automatically. No copy-paste. No repetitive code. Just clean logic.

Why This is a Game Changer for Production 🎯

While the browser doesn't natively speak @arr, the FSCSS CLI does. By running fscss style.fscss style.css, it compiles those few lines of logic into a standard, production-ready CSS file.

Benefit Description
Maintainability Change one line of logic instead of 100 keyframes
Performance Get smooth, GPU-accelerated CSS animations without the manual labor
Cleaner Source Your source files stay tiny and readable

See it in Action ⚡️

Here's a live demo showing how a few lines of FSCSS shorthand creates a dynamic, frame-perfect loading sequence:

<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.14/exec.min.js" async></script>

<style>
body{
  background: #121212;
  padding: 20px;
  color: #ddd;
}
h2:after{
  content: "...";
  animation: count 10s steps(100) forwards;
}

/* array of 1 to 99 */
@arr numlist[count(99)]

/* animation */
@keyframes count{
  /* downloading... */
  0%{
    content: 'ing...0%'
  } 

  /* looping */
  @arr.numlist[]%{
    content: 'ing...@arr.numlist[]%';
  } 

  /* 100% downloaded */
  100%{
    content: 'ed';
  }
}
</style>

<h2>Download</h2>

Interactive Demo on CodePen

How to Use It in Your Workflow 🔧

Ready to supercharge your CSS animations? Getting started takes just three steps:

Install FSCSS

npm install -g fscss

Write Your .fscss File

Create a file with shorthand goodness:

@arr numbers[count(50)]

@keyframes pulse {
  @arr.numbers[]% {
    opacity: calc(@arr.numbers[] / 100);
    transform: scale(calc(1 + @arr.numbers[] / 200));
  }
}