html - Chrome 中的纯 CSS3 动画和旋转无法正确返回到适当的状态

Question

我正在尝试纯粹使用 CSS3 类更改来管理一系列旋转、收缩效果和突出显示效果，以便将 JS 的使用限制为仅应用类更改。我也只能使用 Chrome。

我遇到了一个问题，即浏览器似乎不尊重类指定的转换。

我的目标是完成以下步骤:

1. 完整动画
2. 暂停和缩小动画
3. 通过拉出两张图像并将其旋转到正确的视角来突出显示它们
4. 以正确的对等轮换方式将图像恢复到暂停的堆栈中
5. 恢复完整动画

为此，我将图像(在这种情况下都是猫)的默认状态定义为暂停动画中的旋转:

/* Define the default bevaviour as a paused rotation */
 .cat {
    position: absolute;
    left: 20px;
    -webkit-transform: translateX(-60px) translateY(100px) translateZ(0px) rotateX(60deg) rotateY(0deg) rotateZ(30deg);
    -webkit-transform-origin-x: 50%;
    -webkit-transform-origin-y: 50%;
    opacity: 0.8;
    -webkit-animation: all 10s linear;
    -webkit-animation-iteration-count:infinite;
    width: 500px;
    -webkit-animation-play-state: paused;
    -webkit-transition: all;
    transition: all 4s ease;
}

父 div 应用了一些类来控制动画行为，后面还有其他类来控制突出显示行为 - 详细信息请参见:

http://jsfiddle.net/kaiesh/m3str/5/

但是，这会导致突出显示工作不正常，突出显示的图像不会旋转到正确的方向。

我尝试通过将动画类应用于处于运行状态的图像来解决此问题(我已经完成了示例中的猫图像之一) - 您可以在此处看到:

http://jsfiddle.net/kaiesh/m3str/6/

但是，在第二个示例中，旋转会跳跃，然后，当与其同级恢复到缩小版本时，不会停止旋转，即使动画播放状态被标记为暂停。

任何见解将不胜感激!

Answer 1

如果您想在变换时停止并重播动画，则无法更改元素的变换。或者，可能更好，走这条路太棘手了。

如果你在另一个元素中处理这个问题会更好；在本例中是图像本身。

首先，让我们为动画添加一个易于检索的属性:

@-webkit-keyframes allcats {
    0% {
        -webkit-transform: rotateX(60deg) rotateZ(0deg) rotateY(0deg);
        z-index: 0;}
  100% {
        -webkit-transform: rotateX(60deg) rotateZ(360deg) rotateY(0deg);
        z-index: 360;}
}

这是因为变换是作为矩阵检索的，并且获取 Angular 非常复杂。这样，检索 z-index 您就可以直接知道旋转是什么。

现在在图像上设置相反的旋转，使它们变直

$('#stage-2').click(function (e) {
    var step = $("#image2").css("z-index");
    $("#image2").addClass("upper");
    $("#image3").addClass("lower");
    $("#image2 img").css("webkitTransform", "rotate(-"+step+"deg)");
    $("#image3 img").css("webkitTransform", "rotate(-"+step+"deg)");
});

将旋转重置为无:

$('#stage-3').click(function (e) {
    //$("#left1 .cat").addClass("cat-stopped").removeClass("cat-rotate");
    $("#image2").removeClass("upper");
    $("#image3").removeClass("lower");
    $("#image2 img").css("webkitTransform", "");
    $("#image3 img").css("webkitTransform", "");
});

顺利完成

.cat img {
    transition: all 4s ease;
}

fiddle