DEV Community

Cover image for FSCSS animation example
FSCSS tutorial
FSCSS tutorial

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

simplify your css workflow with FSCSS

Top comments (0)