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

时间:2011-07-06 17:46:10

标签: css firefox animation css3 webkit

我正在使用CSS中的关键帧动画,我希望能够为我正在制作动画的每个属性指定不同的计时功能。例如,在给定的关键帧期间,我想通过一个易于定时的函数将不透明度从0设置为1,并使用线性计时功能从0到100进行顶部设置。

通过执行类似下面的操作,可以使用CSS过渡。 (不幸的是,我出于其他原因需要关键帧动画。)

-webkit-transition-property: opacity, top;
-webkit-timing-function: ease-in, linear;

另外,我注意到(在this link),animation-timing-function属性的规范接受以逗号分隔的列表。但是,我没有看到任何方法来指定相应的属性列表或任何关于计时功能列表的用途的文档。有谁知道我想做什么是可能的?

1 个答案:

答案 0 :(得分:4)

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

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

http://jsfiddle.net/desz9/