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/

如何反转此CSS旋转动画？

1 个答案: