如何反转此CSS旋转动画？

Question

我有这个CSS动画,我试图根据添加到DOM节点的类来反转动画.我尝试了很多东西,但没有用.这是我正在使用的代码,见下文:

例

    // 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); } }

我不知道我是否看错了？请指教(一个演示会很棒).

Answer 1

不要打扰javascript或动画.使用CSS转换:

.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/