Fonction scss pour les images-clés d'animation

Question

Je voudrais faire une fonction sass réutilisable qui me facilite l'écriture d'une animation css @keyframes sans écrire trop de code mais je ne suis pas sûr de la façon de s'y prendre, en particulier la partie mathématique .

i ont une div contenant une seule image de fond avec cette css

height: 100vh; 
width: 8000px; 

cette image d'arrière-plan est composé de 25 cadres. donc chaque image a une largeur de 320 pixels.

l'animation devrait translateX() la div par multiple de 320px tous les 4%, donc quelque chose comme ceci:

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

    ... 
} 

je voudrais faire en fonction de cela, mais je suis nouveau aux fonctions de SCSS et i vraiment Je ne sais pas par où commencer. Si quelqu'un pouvait me donner un indice, ce serait génial!

grâce

Answer 1

pourrait être mieux (modularisation) mais voici pour vous;

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

MISE À JOUR:

Je pense que celui-ci est un peu mieux.

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