我有点新动画，所以原谅我，如果我在这里错过了一个巨大的概念。我需要为箭头指向一个点的动画，我们来说说这是一个三次曲线。箭头沿着曲线的线移动，总是指向其下方几个像素。
所以我做了，是使用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-animation-timing-function：ease-in运行这个动画时，它适用于每个关键帧的宽松，这绝对不是我想要的。我想让宽松适用于整个动画。
有不同的方式我应该这样做吗？有没有一些属性可以将缓解应用于整个序列，而不是每个关键帧？
解决方法
您不能在一系列关键帧中应用缓动功能，因为您具体告诉对象在特定时间处于特定点。如果你应用了一系列关键帧，那么在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支持沿着路径的动画，那么您将不需要这些关键帧，而将缓存应用到两个关键帧就没有任何麻烦。
