问题
I'm using the following css transition:
cubic-bezier(0.16, 1, 0.29, 0.99)
The issue is that at the end of the animation, the velocity of the element is so slow that the human eye can see the individual frames.
Here is a jsfiddle that demonstrates the issue: http://jsfiddle.net/vivmaha/xu7dzrbs/
Is there a common solution for the above problem?
For example, can I specify both a cubic bezier AND a minimum velocity?
回答1:
I think the apparent slowness (i.e. as it is sometimes referred to as jank) at the end of an animation depends on what CSS attribute you are animating.
For example, if it is left attribute being animated then the jank-iness will be pretty obvious but if it is replaced by something that animates translateX on a transform property then I think the result will be much smoother.
I believe CSS Triggers is a good resource regarding this, in that it tells you which properties trigger layout, paint and finally composition.
Other than that, you probably need to present us with a demo depicting the slowness. So that we could better tell if it is something to do with easing curves or if it is a problem with the property you are animating in the first place.
Here is a before and after of this solution.
来源：https://stackoverflow.com/questions/33291734/how-to-smoothen-a-cubic-bezier-transition