dada78's post in Spritesheet Animation: Stepped Ease was marked as the answer
I figured it out! In case someone has the same issue and uses Texturepacker for generating sprites:
In the settings the Trim mode should be set to "None": Sprites > Trim mode > None. This setting outputs the exact sprite I needed in order for the stepped Ease to work. Also make sure to input a fixed size width, based on the amount of images you have. In my case that would be 31 (images) multiplied by 160 (width of div) = Fixed width: 4960px.
dada78's post in Scaling backgroundSize issues was marked as the answer
Hah, I found the fix...Out of all the solutions posted the one from tNick Spiel:https://css-tricks.com/forums/topic/chrome-webkit-border-radius-bug/page/2/
"The following applied to the parent element with the border radius applied to kick webkit back into line for me:"
-webkit-mask-image: -webkit-radial-gradient(white, black); worked for me!