从一个动画过渡到另一个动画

Question

那么，简单的问题:

我有一个元素，它在正常状态下有一个动画-一个不断运行的变换动画(perspective, rotateX和rotateZ -但只有rotateZ变化)。在:hover我想改变动画(删除rotateX和perspective转换，但保留rotateZ动画)-这是没有问题的，但我想动画过渡到新的动画，我不知道如何完成。

JSFiddle

来自:

@-webkit-keyframes rotatespace {
  0% {
    transform:perspective(555px) rotateX(55deg) rotateY(0deg) rotateZ(0deg) scale(1.25);
  }
  100% {
    transform:perspective(555px) rotateX(55deg) rotateY(0deg) rotateZ(360deg) scale(1.25);
  }
}

:

@-webkit-keyframes rotateflat {
  0% {
    transform:perspective(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.25);
  }
  100% {
    transform:perspective(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scale(1.25);
  }
}

Answer 1

不要将所有的转换样式应用到一个元素上，你可以使用:before伪元素来显示动画块，并使用rotateX来显示"3D"效果。

的例子:

.block {
    position: absolute;
    top:100px;
    left:100px;
    width: 100px;
    height:100px;
    transform-origin: center center 0px;
    overflow:visible;
    transform:perspective(555px) rotateX(55deg) scale(1.25);
    transition:transform .5s;
}
.block:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: blue;
    animation-name: rotatespace;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
    animation-timing-function: linear;
}
.block:hover {
    transform:perspective(555px) rotateX(0deg) scale(1.25);    
}
@keyframes rotatespace {
    0% {
        transform:rotateZ(0deg);
    }
    100% {
        transform:rotateZ(360deg);
    }
}

<div class="block"></div>