Having an issue with the animation on my homepage where the logo spins into place. It works fine on desktop and in Chrome and Firefox mobile simulators, but on actual phones it rotates an additional 90 degrees. Included are screenshots from the Firefox mobile view and my iPhone.
Here is the correct version: https://i.stack.imgur.com/WpMrz.png
And here is the incorrect version (iPhone): https://i.stack.imgur.com/gmlzv.jpg
Included below is the code snippet:
@keyframes spin { 100% { transform:rotate(720deg); } }
@keyframes size {
0% { opacity: 0; transform: scale(0); }
30% { opacity: 0; transform: scale(0); }
100% { opacity: 1; transform: scale(1); }
}