CSS3 Spinning Animation doesn't work on Iphone

Question

Can anybody tell why this CSS3 Animation refuses to work when I test it on my Iphone? It works fine on Chrome.

    .heartbeat:after {
        content: "\f118";
        font-family: fontAwesome;
        font-size: 50px;
        color: rgb(0, 156, 255);
        -webkit-animation: spin 1000ms ease 0s infinite normal;
        -moz-animation: spin 1000ms ease 0s infinite normal;
        -ms-animation: spin 1000ms ease 0s infinite normal;
        -o-animation: spin 1000ms ease 0s infinite normal;
        animation: spin 1000ms ease 0s infinite normal;
    }

    @-ms-keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }
    @-moz-keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }
    @-webkit-keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }
    @keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }

I checked similar questions and tried to replace from and to with 0% and 100% , and rotate 180 degrees at a time, use rotate3d instead; didnt work.

Answer 1

There is a reason behind this. You have an error here:

  @-ms-keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }
    @-moz-keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }
    @-webkit-keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }
    @keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }

---

Notice anything here, for example?

@-moz-keyframes spin { 
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

You're using a -moz- keyframe, which is fine, but notice anything else?

How about the -webkit- prefix on the transform?

---

So, in essence, this would become:

@-moz-keyframes spin { 
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}

Repeat this for your other keyframes and this should sort out a problem or two...