css - 动画关键帧的 scss 函数

Question

我想做一个可重用的 sass 函数，使我可以轻松编写 @keyframes css 动画而无需编写太多代码，但我不确定如何去做，尤其是数学部分。

我有一个 div，其中包含带有此 css 的单个背景图像

height: 100vh;
width: 8000px;

这张背景图片由25帧组成。所以每一帧都是 320 像素宽。

动画应该 translateX() 每 4% 将 div 乘以 320px 的倍数，所以像这样:

@keyframes animation {
    0% {
        transform:translateX(0);
    }
    4% {
        transform:translateX(-320px);
    }
    8% {
        transform:translateX(-640px);
    }

    ...
}

我想做一个函数，但我是 scss 函数的新手，我真的不知道从哪里开始。如果有人能给我一个提示，那就太好了!

谢谢

Answer 1

可能会更好(模块化)，但这里适合您；

@mixin deneme($i){
  @for $i from 0 through 100/$i {
    #{$i * 4}% {
      transform:translateX(#{-320 * $i});
    } 
  }
}

更新:

我觉得这个好一点。

@mixin deneme($increase, $angle){
  @for $x from 0 through 100/$increase {
    #{$x * $increase }% {
      transform:translateX($angle * $x);
    } 
  }
}