Really odd Safari bug with @Keyframes on my devices

Hello everyone, I hope your Saturday night is going great! I've ran into a really really weird bug in Safari, I'll tell you the story about it here:

A few months back, I got an assigment from my web developer teacher to make a site with modern and advanced web technologies, and I deicided to make a re-designed landing page for the code editor 'Coda'. It's been going great so far, but a few days ago I implented a @Keyframe animation for an SVG file. It works great in Coda on my Mac, but not in Safari? I first thought that I made a mistake somewhere, but I've added both @Keyframes with and without the -webkit- prefix, and then I saw that it didn't work on any of my mobile devices either.. I'll show my code here:

@-webkit-keyframes color_change {
0% { fill: #41B9D1; }
20% { fill: #9BFF1B; }
40% { fill: #F27E18; }
60% { fill: #FFD700; }
80% { fill: #FF0066; }
100% { fill: #41B9D1; }
}

@keyframes color_change {
0% { fill: #41B9D1; }
20% { fill: #9BFF1B; }
40% { fill: #F27E18; }
60% { fill: #FFD700; }
80% { fill: #FF0066; }
100% { fill: #41B9D1; }
}

@-webkit-keyframes color_change_2 {
0% { fill: #127093; }
20% { fill: #FF0066; }
40% { fill: #FFD700; }
60% { fill: #F27E18; }
80% { fill: #9BFF1B; }
100% { fill: #127093; }
}

@keyframes color_change_2 {
0% { fill: #127093; }
20% { fill: #FF0066; }
40% { fill: #FFD700; }
60% { fill: #F27E18; }
80% { fill: #9BFF1B; }
100% { fill: #127093; }
}

#Shape2 { /* SVG path I'm changing the fill on */
-webkit-animation: color_change 10s infinite alternate;
animation: color_change 10s infinite alternate;
}

#Shape3 { /* the other SVG path I'm changing the fill on */
-webkit-animation: color_change_2 10s infinite alternate;
animation: color_change_2 10s infinite alternate;
}

And now to the weird part, the animation works fine on ANY other devices except for MY ones.. And that includes an iPhone 6 and a brand new iPad Pro 9.7" running iOS 9.3.1, aswell as a rMBP running OS X 10.11.4 with Safari 9.1. I've tested the site on 4 other iPhones(4S, 5C, 2 6S) and all of them work fine.. Although, the 5C ran the animation the first time and now refuses to play it at just like mine(although mine never displayed it at all). On my Mac I can see that when I mark the SVG with the color animation on the site, it's flickering A LOT.. Here's the link to the animation itself(This one works fine on all devices and doesn't cause any issues): https://jsfiddle.net/hrygw4vn

I've ensured that the animation works separately and @Keyframes works fine on all devices, and yet only MY personal ones has this problem on THIS site... I've tested with and without private mode enabled, aswell as rebooting, clearing cache etc. It's also worth to mention that it works fine in 3rd party browsers such as Puffin and iCab, and also when I open it with the Safari View Controller in different apps(Skype, Tweebot)...

Does anyone have a clue on what's going on?

Thanks!