アニメーションキーフレーム用scss関数

Question

コードをあまり書き込まずに@keyframes CSSアニメーションを書くのが簡単な再使用可能な盛り上がり関数を使用したいと思いますが、特に数学部分。

私は、この背景画像が25個のフレームで構成され、このCSS

height: 100vh; 
width: 8000px; 

有する単一の背景画像を含むDIVを有します。各フレームの幅は320ピクセルです。

アニメーションが320PXの倍数ですべての4％のdivをtranslateX()なければならないので、このような何か：

@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}); 
    } 
    } 
} 

UPDATE：

私はこの1つは少し優れていると思います。

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