How do I reverse this CSS rotate animation?

css, css-animations

Solution

Don't bother with javascript or animations. Use a CSS transition for this:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    transition:all 1s ease-out;
    transform:rotate(0deg);
    -webkit-transform:rotate(0deg); /* Safari and Chrome */
}

.image:hover {
    transform:rotate(90deg);
    -webkit-transform:rotate(90deg); /* Safari and Chrome */
}

http://jsfiddle.net/Ugc5g/892/

Problem

I have this CSS animation which I'm trying to reverse the animation of based on a class being added to a DOM node. I've tried multiple things but with no avail. Here is the code I'm using, see below: EXAMPLE ``` // Closed state @-moz-keyframes spin-close { 100% { -moz-transform: rotate(-0deg); } } @-webkit-keyframes spin-close { 100% { -webkit-transform: rotate(-0deg); } } @keyframes spin-close { 100% { transform:rotate(-0deg); } } // Open state @-moz-keyframes spin-open { 100% { -moz-transform: rotate(-90deg); } } @-webkit-keyframes spin-open { 100% { -webkit-transform: rotate(-90deg); } } @keyframes spin-open { 100% { transform:rotate(-90deg); } } ``` I don't know whether I'm looking at it all wrong? Please advise(a demo would be awesome).

Original source