从一个动画过渡到另一个

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 伪元素用于动画块，将元素本身用于“3D”效果（rotateX），而不是将所有变换样式应用于一个元素。

示例：

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

从一个动画过渡到另一个

Transition from one animation to another

css

css-transitions

css-transforms

css-animations