DEV Community

FSCSS tutorials
FSCSS tutorials

Posted on • Edited on

FSCSS animation example

Using a very short code to create an animation,
MY HTML:

<H1></H1>
<DIV></DIV>
Enter fullscreen mode Exit fullscreen mode

MY CSS

H1, DIV{
ANIMATION: CHANGE 3S LINEAR INFINITE;
} 
@KEYFRAMES CHANGE{
0%{
BACKGROUND: RED;
WIDTH: 0;
HEIGHT: 0;
}
100%{
BACKGROUND: #00F;
WIDTH: 150px;
HEIGHT: 150PX;
}
}
Enter fullscreen mode Exit fullscreen mode

USING FSCSS INSTEAD:

$(@KEYFRAMES H1, DIV &[3S LINEAR INFINITE]){
0%{
BACKGROUND: RED;
%2(WIDTH,
HEIGHT[: 0;]) 
}
100%{
BACKGROUND: #00F;
%2(WIDTH, 
HEIGHT[: 150PX;]) 
}
}
Enter fullscreen mode Exit fullscreen mode

Check out FSCSS animation example below

Available on FSCSSv4.0.1: https://cdn.jsdelivr.net/gh/Figsh/FSCSS@4.0.1/fs.ex25.js

Code:


<script src='https://cdn.jsdelivr.net/gh/Figsh/FSCSS@4.0.1/fs.ex25.js' async=""></script>
<style>
$var: value;
Sel{
Prop: $var!;
} 
</style>

Enter fullscreen mode Exit fullscreen mode

Loading animation with FSCSS:
STEP1:
Implement FSCSS in the Project.
CODE:

<script src='https://combinatronics.io/Figsh/FSCSS/refs/heads/4.0.1/fscss_exec.js' async=""></script> 
Enter fullscreen mode Exit fullscreen mode

STEP2:
create the loading strocture with HTML
CODE:

<h1 class="box">
<div name='box'>loading</div></h1>
Enter fullscreen mode Exit fullscreen mode

STEP3:
style it up and create the loading animation frames with FSCSS
CODE:

$bg-stack: linear-gradient(30deg, #555 0% 40% , #770 10% 80%, #555 30% 50%);
.box{                                                                                                   background: $bg-stack!;
}
$(name:box):after{                                                                                                  content:'';
}
$(name: box) {                                                                                                  width: 300px;                                                                                                   padding-left: 50px;                                                                                                     color: #aad;
}
$(@keyframes dot, $(name:box):after &[5s linear infinite]){                                                                                             0%{                                                                                                                                                                                                     content: ".";                                                                                               }                                                                                                   50%{                                                                                                                                                                                                        content: "rpt(1, '.')";                                                                                                 }                                                                                                                                                                                                                           100%{                                                                                                                                                                                                   content: "rpt(2, '.')";                                                                                             }}                                      $(@keyframes box, .box &[50s steps(30) 1 forwards]){                                                                                                    0%{                                                                                                                                                                                                     width: 0;                                                                                                   }                                                                                                   100%{                                                                                                                                                                                                       width: 80%;                                                                             }}                                                                                                  </style>
Enter fullscreen mode Exit fullscreen mode

This is how your HTML will look like:

<script src='https://combinatronics.io/Figsh/FSCSS/refs/heads/4.0.1/fscss_exec.js' async=""></script>
<h1 class="box">
<div name='box'>loading</div></h1>                                                                                                  <style>
$bg-stack: linear-gradient(30deg, #555 0% 40% , #770 10% 80%, #555 30% 50%);
.box{                                                                                                   background: $bg-stack!;
}
$(name:box):after{                                                                                              content:'';
}
$(name: box) {                                                                                          width: 300px;                                                                                               padding-left: 50px;                                                                                                     
color: #aad;
}
$(@keyframes dot, $(name:box):after &[5s linear infinite]){                                                                                     0%{                                                                                                                                                                                                 content: ".";                                                                                       }                                                                                               50%{                                                                                                                                                                                                        content: "rpt(1, '.')";                                                                                             }                                                                                                       100%{                                                                                                                                                                                                   content: "rpt(2, '.')";                                                                                             }                                                                                                   }
$(@keyframes box, .box &[50s steps(30) 1 forwards]){                                                                                                0%{                                                                                                                                                                                                 width: 0;                                                                                                   }                                                                                                   100%{                                                                                                                                                                                                       width: 80%;                                                                                     }}                                                                                                  </style>

Enter fullscreen mode Exit fullscreen mode

FSCSS Syntax highlights

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay