目标结果是一个动画,其中矩形3d在X轴上翻转180度,同时从后面巧妙地放大。
这是我到目前为止所做的:
@keyframes zoomFlipIn {
0% {
transform: perspective(600px) translateZ(-100px) rotateX(-180deg);
}
50% {
transform: perspective(600px) translateZ(-50px) rotateX(-90deg);
}
75% {
transform: perspective(600px) translateZ(-25px) rotateX(-45deg);
}
100% {
transform: perspective(600px) translateZ(0) rotateX(0deg);
}
}
工作示例:http://codepen.io/zvuc/pen/wBJBXK
所以我首先perspective
为动画元素设置单独的3d环境,然后translateZ
来回移动框,然后{x}在x轴上翻转它
我把它放在一张照片中:
哪个工作正常,但现在我有一个问题,是否有办法从中间关键帧中省略单个rotateX
属性值?
将它放在代码中,它将是:
transform
据我所知,只有当关键帧在所有步骤中都具有匹配的属性时,动画才会正常工作,所以很明显这不会按预期动画,因为2个中间步骤缺少@keyframes zoomFlipIn {
0% {
transform: perspective(600px) translateZ(-100px) rotateX(-180deg);
}
50% {
transform: perspective(600px) rotateX(-90deg);
}
75% {
transform: perspective(600px) rotateX(-45deg);
}
100% {
transform: perspective(600px) translateZ(0) rotateX(0deg);
}
}
个函数。 (在这个例子中,关键帧和旋转步骤是相同的步骤,以保持简单,所以你可以摆脱translateZ
和25%
关键帧,并在这种特定情况下获得相同的结果,但让我们采取现在不考虑了)
事实上,当我测试上面的代码时,动画无法正常运行。
所以我开始思考,如果变换函数有一个75%
值,我可以用来传递前一个关键帧的值,所以我试了一下:
方法#01:
inherit
方法#02:
@keyframes zoomFlipIn {
0% {
transform: perspective(600px) translateZ(-100px) rotateX(-180deg);
}
50% {
transform: perspective(600px) translateZ(inherit) rotateX(-90deg);
}
75% {
transform: perspective(600px) translateZ(inherit) rotateX(-45deg);
}
100% {
transform: perspective(600px) translateZ(0) rotateX(0deg);
}
}
甚至, 方法#03:
@keyframes zoomFlipIn {
0% {
transform: perspective(600px) translateZ(-100px) rotateX(-180deg);
}
50% {
transform: perspective(600px) translateZ() rotateX(-90deg);
}
75% {
transform: perspective(600px) translateZ() rotateX(-45deg);
}
100% {
transform: perspective(600px) translateZ(0) rotateX(0deg);
}
}
我很确定这不是有效的语法,因为我从来没有听说过这样的符号。但有趣的是,所有三种方法都按预期显示动画,在整个动画时间轴的持续时间内平滑地从-100px转换到-0px。与手动输入@keyframes zoomFlipIn {
0% {
transform: perspective(600px) translateZ(-100px) rotateX(-180deg);
}
50% {
transform: perspective(600px) translateZ rotateX(-90deg);
}
75% {
transform: perspective(600px) translateZ rotateX(-45deg);
}
100% {
transform: perspective(600px) translateZ(0) rotateX(0deg);
}
}
和-50px
值的位置相同。
检查了最新的Chrome和Firefox,两者都运行正常。
如果它工作正常,我可以继续使用它,但我想检查这是否是一个错误的行为(无论浏览器解释语法的方式)和/或实际的W3C文档解释如此一个符号。我四处搜索但找不到同时使用组合变换符号和关键帧动画的示例。
关于这个问题的任何想法?