How to rotate a single character using Css3?

Question

I have been having trouble understanding how css3 rotations work. I have seen many examples and tried to implent my own, but to no avail. My goal is to have a link spin a single character I.e. text >> (+) on click. What I want to achieve is to have the animation start farily slow speed up rapidly then stop all in a couple seconds or less.

I don't know if that is particularly possible with Css3, if not I will use Jquery. However I have tried to wrap my head around the keyframes thing. I know I need a kit for each browser specifically to create the animation and add the attributes. After which I need to set the rules for keyframes and rotation degrees. But every time I try to write the code I get errors almost as if it's a syntax error. (somehere in here apparently.)

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

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

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

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

I have spent almost an hour looking at that specific code, not a single syntax error. If anyone that can help with my problem would I would be greatful.

Js Fiddle

This is basically what I am after but I want to click and spin it.

Answer 1

Reduce the duration to speed it up.

animation-duration: 2000ms;

Animation timing function will give you the faster spin near the end of the animation.

animation-timing-function: ease-in;

For this to be a bit more flexible I'd separate your animation CSS3 from the div and into its own class so you can add it on the initial click.

div.spin {    
    -webkit-animation-name: spin;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;

    -moz-animation-name: spin;
    -moz-animation-duration: 2000ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;

    -ms-animation-name: spin;
    -ms-animation-duration: 2000ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease-in;

    animation-name: spin;
    animation-duration: 2000ms;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
}

You'll need to use javascript to trigger the animation on click and to restart the animation.

var $div = $("div");

$div.click(function (e) { 
    // restart animation
    $(this).addClass("spin");

    var el     = $(this),  
     newone = el.clone(true);

     el.before(newone);

     $("." + el.attr("class") + ":last").remove();
});

See the full working example here