Firefox 如何为每个属性定义具有不同计时功能的CSS动画?

Firefox 如何为每个属性定义具有不同计时功能的CSS动画?,firefox,animation,css,webkit,Firefox,Animation,Css,Webkit,我正在使用CSS中的关键帧动画,我希望能够为我正在制作动画的每个属性指定不同的计时功能。例如,在给定的关键帧期间,我希望使用“轻松计时”功能将不透明度从0设置为1,使用“线性计时”功能将不透明度从0设置为100 这可以通过CSS转换实现,方法如下。(不幸的是,出于其他原因,我需要关键帧动画。) 另外,我注意到(at)动画计时函数属性的规范接受逗号分隔的列表。但是,我看不到任何方法可以指定相应的属性列表或任何关于计时函数列表用途的文档。有人知道我想做的事情是否可行吗?我发现使用逗号分隔的速记更容易

我正在使用CSS中的关键帧动画,我希望能够为我正在制作动画的每个属性指定不同的计时功能。例如,在给定的关键帧期间,我希望使用“轻松计时”功能将不透明度从0设置为1,使用“线性计时”功能将不透明度从0设置为100

这可以通过CSS转换实现,方法如下。(不幸的是,出于其他原因,我需要关键帧动画。)


另外,我注意到(at)动画计时函数属性的规范接受逗号分隔的列表。但是,我看不到任何方法可以指定相应的属性列表或任何关于计时函数列表用途的文档。有人知道我想做的事情是否可行吗?

我发现使用逗号分隔的速记更容易:

img {
   -webkit-animation:
      updown 2s ease-in infinite,
      rotate 1s ease-out infinite;
}

谢谢。这实际上是我在此期间一直在使用的解决方法-使用两个单独的动画,以便我可以在每个动画上指定计时功能。当您想要处理animationend事件时,这会变得很混乱,因为现在您必须知道在动画真正结束之前要等待N个事件。因为CSS转换有一种简洁的方法,所以我希望动画也有。啊,我误解了你的问题。我认为没有办法实现你想要的,但我很高兴被证明是错的。
img {
   -webkit-animation:
      updown 2s ease-in infinite,
      rotate 1s ease-out infinite;
}