在CSS动画关键帧的组合变换中传递值(继承)?

时间:2015-01-13 09:33:57

标签: css animation transform

目标结果是一个动画,其中矩形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轴上翻转它

我把它放在一张照片中:

手动设置所有中间值的关键帧:

Figure 01

哪个工作正常,但现在我有一个问题,是否有办法从中间关键帧中省略单个rotateX属性值?

省略了一些中间值的关键帧:

enter image description here

将它放在代码中,它将是:

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); } } 个函数。 (在这个例子中,关键帧和旋转步骤是相同的​​步骤,以保持简单,所以你可以摆脱translateZ25%关键帧,并在这种特定情况下获得相同的结果,但让我们采取现在不考虑了)

事实上,当我测试上面的代码时,动画无法正常运行。

所以我开始思考,如果变换函数有一个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文档解释如此一个符号。我四处搜索但找不到同时使用组合变换符号和关键帧动画的示例。

关于这个问题的任何想法?

0 个答案:

没有答案