Scss function for animation keyframes
I would like to make a sass reuse function that makes it easier for me to write @keyframes
css animations without writing too much code, but I'm not sure how to do it, especially the math part.
I have a div containing one background image with this css
height: 100vh;
width: 8000px;
this background image has 25 frames. so each frame is 320 pixels wide.
the animation should translateX()
multiply the div by 320px every 4%, so something like this:
@keyframes animation {
0% {
transform:translateX(0);
}
4% {
transform:translateX(-320px);
}
8% {
transform:translateX(-640px);
}
...
}
I would like to make a function of this, but I am new to scss functions and I really have no idea where to start. if someone can give me a hint that would be great!
thank
source to share
Maybe better (modularize), but here's for you;
@mixin deneme($i){
@for $i from 0 through 100/$i {
#{$i * 4}% {
transform:translateX(#{-320 * $i});
}
}
}
UPDATE:
I think this is a little better.
@mixin deneme($increase, $angle){
@for $x from 0 through 100/$increase {
#{$x * $increase }% {
transform:translateX($angle * $x);
}
}
}
source to share