css - “动画方向”无效。为什么？

这是小提琴：http://jsfiddle.net/joplomacedo/mnj8n/

@-webkit-keyframes half-flip {
    0% { -webkit-transform: rotateX(0deg); }
    100% { -webkit-transform: rotateX(90deg); }
}

.half-flip-out {
    -webkit-animation: half-flip 1s;
    -webkit-transform: rotateX(90deg);
}

.half-flip-in {
    -webkit-animation: half-flip 1s reverse;
    -webkit-transform: rotateX(0deg);
}

我正在用jQuery切换类。由于某些原因，.half-lip-in与.half-lip-out完全相同。我不知道为什么。

最佳答案

问题不在于animation-direction。我将在后面解释，因此现在让我们开始深入研究。

您的CSS3关键帧动画声明应如下所示：

@-webkit-keyframes half-flip {
    0% {
        -webkit-transform: rotateX(0deg);
    }

    100% {
        -webkit-transform: rotateX(90deg);
    }
}

@-webkit-keyframes half-flip02 {
    0% {
        -webkit-transform: rotateX(90deg);
    }

    100% {
        -webkit-transform: rotateX(0deg);
    }
}

.half-flip-out {
    -webkit-animation: half-flip 1s;
}

.half-flip-in {
    -webkit-animation: half-flip02 1s;
}

正如您在上面看到的，有2个@-webkit-keyframes声明-每个声明都是彼此相反的。还要注意，我从-webkit-transform: rotateX(0deg);和-webkit-transform: rotateX(90deg);都删除了.half-flip-out和.half-flip-in。原因很简单：已经在关键帧动画中将其定义为第一帧0％和最后一帧100％。

接下来，您应该清理jQuery。不必使用计数器来确定要在DIV中添加或删除的类。同样，jQuery中较短的代码等同于更快的执行速度。始终优化您的代码。

这是您的jQuery的样子：

var folding_img_wrap = $('.folding_img_wrap'),
    toggle_count = 0;

$('.toggle').on('click', function() {
    if (toggle_count % 2 === 0) {
        folding_img_wrap.addClass('half-flip-out').removeClass('half-flip-in');
    } else {
        folding_img_wrap.removeClass('half-flip-out').addClass('half-flip-in');
    }
    toggle_count++;
});

这就是我建议的方式：

var folding_img_wrap = $('.folding_img_wrap'),

$(".toggle").toggle(function(){
    folding_img_wrap.addClass('half-flip-in').removeClass('half-flip-out');
},function(){
    folding_img_wrap.removeClass('half-flip-out').addClass('half-flip-in');
});

您可以查看我的解决方案here。

切记还请在CSS3声明中使用-moz-前缀，否则，它将仅在Chrome＆Safari上有效。另请注意，IE9或Opera中不支持keyframes。

关于css - “动画方向”无效。为什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11171027/