CSS animation (box-shadow) help needed

Hello all!

I am about done with my current project but cannot seem to get it to animate properly on iOS. I’ve worked hard the last couple weeks on this and have expended every resource I could find and googled searched the heck out of this issue but still no answer.

The problem is my Mega Man box-shadow image doesn’t animate properly on iOS. On my PC it works just fine. Also the enemy doesn’t display on iOS. I think it’s directly related to animation-timing-function using steps but am not 100% sure.

I have turned on the auotprefixer in CodePen and that didn’t work. I also turned it off and added -webkit- prefix to the megaman @keyframes and box-shadow. How exactly does the autoprefixer work?

This started of as a way for me to play with box shadows and has grown into a little more. I would like to see this work properly on iOS so if anyone could help me out I’d greatly appreciate it.

I’ll also take feed back on my css usage if you have any. I’ve only been doing this about 2 months so there’s lots to learn still.

Thanks in advance.

I think you should test this on IOS in Google Chrome Browser.

I’ll take a look when I get near my Mac. Are you implying it works in chrome? Doesn’t seem to work on any of my iPhones browser including chrome.