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

所以，简单的问题是：

我有一个元素，它有一个处于正常状态的动画-一个不断运行的变换动画（

perspective

，

rotateX

和

rotateZ

）。在

：悬停

我想更改该动画（删除

rotateX

和

perspective

变换，但保留

rotateZ

动画）-这没有问题，但我想将动画转换为新动画，我不知道如何完成

发件人：

@-webkit关键帧旋转空间{
0% {
变换：透视（555px）旋转（55deg）旋转（0deg）旋转（0deg）比例（1.25）；
}
100% {
变换：透视（555px）旋转（55度）旋转（0度）旋转（360度）比例（1.25）；
}
}

致：

@-webkit关键帧旋转平面{
0% {
变换：透视（0）旋转（0度）旋转（0度）旋转（0度）旋转（0度）缩放（1.25）；
}
100% {
变换：透视（0）旋转（0度）旋转（0度）旋转（360度）缩放（1.25）；
}
}

您可以使用

:before

伪元素作为动画块，使用元素本身作为“3D”效果，而不是将所有变换样式应用于一个元素（旋转体）

例如：

.block{
位置：绝对位置；
顶部：100px；
左：100px；
宽度：100px；
高度：100px；
变换原点：中心0px；
溢出：可见；
变换：透视（555px）旋转（55deg）比例（1.25）；
转变：转变；
}
.布洛克：以前{
内容：“；
位置：绝对位置；
宽度：100%；
身高：100%；
背景：蓝色；
动画名称：rotatespace；
动画持续时间：15秒；
动画迭代次数：无限；
动画方向：反向；
动画计时功能：线性；
}
.block:悬停{
变换：透视（555px）旋转（0度）比例（1.25）；
}
@关键帧旋转空间{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}

---

回答得很好。我认为前面提到的透视变化（555px到0px）不需要在悬停时发生，因为只有0度旋转。并不是说你在回答中改变了它，只是一个观察。谢谢哈利。你的评论很有道理。由于将

透视图设置为
0
使我的Firefox不再显示动画，我决定将
透视图设置为
555px
假设jacksbox能够理解我们要去哪里，并且能够自己应用他想要的。哦，这是一个很好的解决方案-在我的情况下，我必须将我的元素包装成另一个元素，而不是之前的元素，但基本概念保持不变。我会等待，直到我接受这个答案，因为我也想知道，是否有另一个解决方案不包装/：before。但在这一点上非常感谢！回答得好。如果有一种解决方案不涉及某种嵌套元素，我会非常惊讶