使用SCSS创建循环以使用CSS3 animate更改背景图像？

I have created the beginning of a CSS3 animation as shown below. I have tried to use @for and @each within SCSS to create a loop which will increment the %'s and also the number of each background image. My knowledge of advanced SCSS like this is poor, so everything I have tried has been nonsense and trial and error based on reading the SCSS docs - and really not worth posting here.I have created the beginning of a CSS3 animatio