scss function for animation keyframes

Viewed 2012

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.

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

height: 100vh;
width: 8000px;

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

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

    ...
}

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!

thanks

1 Answers
Related