我有点新动画,所以原谅我,如果我在这里错过了一个巨大的概念。我需要为箭头指向一个点的动画,我们来说说这是一个三次曲线。箭头沿着曲线的线移动,总是指向其下方几个像素。
所以我做了,是使用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支持沿着路径的动画,那么您将不需要这些关键帧,而将缓存应用到两个关键帧就没有任何麻烦。