有没有办法让动画计时功能应用于整个动画而不是每个关键帧？
我对动画有点陌生，所以如果我错过了一个重要的概念，请原谅。我需要制作一个指向曲线上一点的箭头动画，为了这篇文章，让我们假设它是一条三次曲线。箭头沿曲线的线条移动，始终指向曲线下方的几个像素。
所以我所做的是，我使用CSS3沿着曲线的线设置关键帧：
@-webkit-keyframes ftch {
0% {
opacity: 0;
left: -10px;
bottom: 12px;
}
25% {
opacity: 0.25;
left: 56.5px;
bottom: -7px;
}
50% {
opacity: 0.5;
left: 143px;
bottom: -20px;
}
75% {
opacity: 0.75;
left: 209.5px;
bottom: -24.5px;
}
100% {
opacity: 1;
left: 266px;
bottom: -26px;
}
}但是，当我使用-webkit-动画-计时-函数: ease-in运行此动画时，它会将该缓动应用于每个单独的关键帧，这绝对不是我想要的。我希望将缓动应用于整个动画。
有没有其他我应该这样做的方式？是否有一些属性可以将缓动应用于整个序列，而不是每个关键帧？
回答 4
Stack Overflow用户
发布于 2010-12-27 13:35:39
您不能在一系列关键帧上应用缓动功能，因为您明确地告诉对象在特定时间处于特定点。例如，如果你在一系列关键帧上应用了一个缓入，那么在25%的时候，对象将在它所需的“检查点”后面，最终加速到100%。
如果点的距离大致相等，则可以应用：
.animatedobject {
-webkit-animation-timing-function: linear;
}你的动画看起来会越来越差，如果有点机器人的话。
一种更自然的方法是加速，保持速度，然后“刹车”：
@-webkit-keyframes ftch {
0% {
opacity: 0;
left: -10px;
bottom: 12px;
-webkit-animation-timing-function: ease-in;
}
25% {
opacity: 0.25;
left: 56.5px;
bottom: -7px;
-webkit-animation-timing-function: linear;
}
50% {
opacity: 0.5;
left: 143px;
bottom: -20px;
-webkit-animation-timing-function: linear;
}
75% {
opacity: 0.75;
left: 209.5px;
bottom: -24.5px;
-webkit-animation-timing-function: linear;
}
100% {
opacity: 1;
left: 266px;
bottom: -26px;
-webkit-animation-timing-function: ease-out;
}
}如果webkit支持沿路径的动画，那么您将不需要这些关键帧，并且只将缓动应用于两个关键帧也没有问题。
Stack Overflow用户
发布于 2010-12-28 07:44:05
当您想要将不同的缓解功能应用于动画的不同方面时，您应该通过将内容嵌套在两个div中来分离动画。
在这种情况下，应创建一个父div以应用移动动画，并创建一个子div以应用不透明度动画。不透明度动画应该有一条缓动曲线:线性，而运动动画应该有你觉得最好的缓动功能。然而，我要重复Duopixel关于混合缓和曲线和固定检查点的说法-在这种情况下，你实际上不应该需要动画，只需要两个0%:100%的动画-一个用于父div，一个用于子div。
在做了很多CSS3动画之后，我为我们的Sencha Animator产品编写了this guide -它有一些关于如何使用CSS3制作复杂动画的有用的一般信息-即使你不想使用这个工具。
Stack Overflow用户
发布于 2010-12-27 02:03:50
给你一些参考：http://www.w3.org/TR/css3-animations/
更具体地说：http://www.w3.org/TR/css3-animations/#timing-functions-for-keyframes-
您可能想要执行动画堆叠，例如移动到一个位置，然后移动到另一个位置，然后在多个关键帧动画中移动到另一个位置，而不是仅移动到一个。
https://stackoverflow.com/questions/4534786
复制相似问题