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

时间:2015-07-14 14:53:34

标签: css3 css-transitions css-animations css-transforms

所以,简单的问题:

我有一个元素,它的动态处于正常状态 - 变换动画(perspectiverotateXrotateZ - 但只有rotateZ个变化)不断奔跑。在:hover我要更改该动画(删除rotateXperspective转换,但保留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);
  }
}

1 个答案:

答案 0 :(得分:3)

您可以使用动态块的: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>
&#13;
&#13;
&#13;