How to dynamically generate CSS3 keyframe steps using SASS?

Viewed 2872

Let's say I have a key frame animation that has 100 steps that increases top by 1 px in each step. It would be logical to use a program to generate such a css.

@keyframes animation
{
    0%   {top:0px;}
    1%  {top:1px;}
    2%  {top:2px;}
    ...
    99%  {top:99px;}
    100% {top:100px;}
}

While this can be done easily in JS, I want to know if there is a way to do it in SASS.

The main problem I'm having right now is I could not find a way to dynamically generate the steps selectors (1%, 2%, 3% etc) .

I have tried #{string} syntax but it will produce an invalid syntax error if used in the percentage selectors, for example:

$num: 100;

@keyframes animation
{
    #{num}%   {top:0px;}

}

Any idea on how to do this correctly would be appreciated.

1 Answers
Related