动画关键帧的scss函数 [英] scss function for animation keyframes

问题描述

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

i would like to do a reusable sass function that makes it easy for me to write a @keyframes css animation without writing too much code but I'm not sure how to go about it, especially the math part.

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

i have a div containing a single background image with this css

height: 100vh;
width: 8000px;

此背景图像由25个帧组成。因此每个帧的宽度为320px。

this background image is composed of 25 frames. so each frame is 320px wide.

动画应将div translateX（） div每4％乘以320px ，所以像这样：

the animation should translateX() the div by multiple of 320px every 4%, so something like this:

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

    ...
}

我想为此功能，但我是新的scss函数，我真的不知道从哪里开始。如果有人可以给我一个很好的提示！

i would like to make a function of this but I'm new to scss functions and i really don't know where to start. if someone could give me a hint that would be great!

谢谢

推荐答案

可能会更好（模块化），但这是给您的；

Could be better (modularise) but here is for you;

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

更新：

我认为这一点要好一些。

I think this one is a bit better.

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

这篇关于动画关键帧的scss函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！