Issue making Bootstrap3 icon spin

Question

Inspired by Fontawesome, I\'m trying to make a spinning icon with bootstrap3. It\'s easily achieve via CSS3 transition and transform. Problem is the icon does not not rotate aro

Answer 1

An additional point, if following this example.

The keyframe definitions need to allow for the case where some properties will be un-vendor prefixed and others won't. For example, in Chrome 35 the current keyframe definitions won't work as keyframes isn't vendor prefixed, but transform still is.

Something like this should allow for all current/future cases:

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

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

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