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伪元素和＆＃34; 3D＆＃34;效果（rotateX）。

示例：

＆＃13;

.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);
    }
}

＆＃13;

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

＆＃13;

从一个动画转换到另一个动画

1 个答案: