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

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs