I am attempting to create a CSS only carousel animation – https://codepen.io/aija/pen/xvXWoK
Everything works perfectly in MacOS Chrome and Firefox, but the delay timing is off in Safari, and iOS Chrome and Safari. The issue is specifically with negative delays, if I do not use them, everything seems to be fine.
However I would really like the first and last carousel item to start in the correct step in the keyframes cycle, so that 3 carousel items are visible when the page first loads (otherwise there is white space when the first three items have not moved in yet).
Thanks!