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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

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