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

Posted 2023-03-06

【中文标题】如何为每个属性定义具有不同计时功能的 CSS 动画？

【英文标题】：How do you define a CSS animation with different timing functions for each property?

【发布时间】：2011-09-29 20:28:05

【问题描述】：

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

这可以通过 CSS 转换实现，方法是执行以下操作。 （不幸的是，由于其他原因，我需要关键帧动画。）

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

另外，我注意到（this link）animation-timing-function 属性的规范接受逗号分隔的列表。但是，我看不到任何方法来指定相应的属性列表或任何有关计时功能列表用途的文档。有谁知道我正在尝试做的事情是否可行？

【参考方案1】：

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

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

http://jsfiddle.net/desz9/

【讨论】：

谢谢。这实际上是我在此期间一直在使用的解决方法 - 使用两个单独的动画，以便我可以指定每个动画的计时功能。当您想要处理动画结束事件时，这会变得很混乱，因为现在您必须知道在动画真正结束之前等待其中的 N 个。由于 CSS 过渡有一种简洁明了的方法，我希望动画也能做到这一点。

啊，我误解了你的问题。我不认为有办法实现你想要的，但我肯定会很高兴被证明是错误的。