customized css keyframes for each animation

Question

I have a linear scroll animation which allows me too loop vertically through a list of images with the css:

@keyframes scroll {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(var(100px));
    }
}
.scroll-container {
    scroll 10s linear infinite;
}

These containers contain images of varying heights, and thus their starting heights are determined at the start and accessed via container.scrollHeight in Javascript. However, the scrolling animation requires the value of var(100px) to be the height of the container in order for the loop to be seamless. Is there a way to set the value of var(100px) independently for each container using javascript?