Using a very short code to create an animation,
MY HTML:
<H1></H1>
<DIV></DIV>
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;
}
}
USING FSCSS INSTEAD:
$(@KEYFRAMES H1, DIV &[3S LINEAR INFINITE]){
0%{
BACKGROUND: RED;
%2(WIDTH,
HEIGHT[: 0;])
}
100%{
BACKGROUND: #00F;
%2(WIDTH,
HEIGHT[: 150PX;])
}
}
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>
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>
STEP2:
create the loading strocture with HTML
CODE:
<h1 class="box">
<div name='box'>loading</div></h1>
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>
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>
Top comments (0)